From 588446c5b9fa3f2eae38ae7fe0d3447169e56a6c Mon Sep 17 00:00:00 2001
From: Nicolas Boulay <nibou230@ulaval.ca>
Date: Wed, 17 Jan 2024 16:45:05 -0500
Subject: [PATCH 01/13] pkp/pkp-lib#9453 Add sections to the round history
 modal

---
 .../ReviewerSubmissionPage.vue                |   3 +
 .../reviewerSubmission/RoundHistoryModal.vue  | 115 ++++++++++++++++--
 .../reviewerSubmissionPageStore.js            |   4 +-
 .../roundHistoryModalStore.js                 |   1 +
 4 files changed, 114 insertions(+), 9 deletions(-)

diff --git a/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue b/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
index 6b2c35623..5d719802e 100644
--- a/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
+++ b/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
@@ -1,5 +1,8 @@
 <template>
 	<div class="mb-4 space-x-2">
+		<span class="bg-medium text-lg-normal">
+			{{ t('reviewer.submission.reviewRound.info') }}
+		</span>
 		<PkpButton
 			v-for="review in store.reviewRoundHistories"
 			:key="review.reviewRoundId"
diff --git a/src/pages/reviewerSubmission/RoundHistoryModal.vue b/src/pages/reviewerSubmission/RoundHistoryModal.vue
index 6f819df40..f4611c9e1 100644
--- a/src/pages/reviewerSubmission/RoundHistoryModal.vue
+++ b/src/pages/reviewerSubmission/RoundHistoryModal.vue
@@ -1,14 +1,89 @@
 <template>
 	<SideModalBody>
-		<template #title>Title TODO</template>
+		<template #title>
+			<h1>{{ t('reviewer.submission.reviewRound.info.history') }}</h1>
+		</template>
+		<template v-if="store.submission" #description>
+			<h2>
+				{{ t(
+					'reviewer.submission.reviewRound.info.modal.title',
+					{reviewRoundNumber: store.reviewRoundNumber, submissionTitle: localize(store.submission.publications[0].title)}
+				) }}
+			</h2>
+		</template>
 		<div class="p-4">
 			<div class="bg-lightest p-5">
-				Here goes all metadata, submissionId: {{ store.submissionId }}, roundId:
-				{{ store.reviewRoundId }}
+				<div v-if="isReviewAssignmentDeclined">
+					<Panel v-bind="panelOptions" class="mb-4">
+						<PanelSection>
+							<template #header>
+								<h2>{{ t('reviewer.submission.reviewDeclineDate') }}</h2>
+							</template>
+							<p>{{ formatShortDate(dateConfirmed) }}</p>
+						</PanelSection>
+					</Panel>
 
-				<div v-if="store.submission">
-					<div class="text-xl-bold">
-						{{ localize(store.submission.publications[0].title) }}
+					<Panel v-if="declinedEmail" v-bind="panelOptions" class="mb-4">
+						<PanelSection>
+							<template #header>
+								<h2>{{ t('reviewer.submission.emailLog') }}</h2>
+							</template>
+							<p>{{ declinedEmail.subject }}<br />{{ declinedEmail.body }}</p>
+						</PanelSection>
+					</Panel>
+					<p v-else>{{ t('reviewer.submission.emailLog.defaultMessage') }}</p>
+				</div>
+				<div v-else>
+					<Panel v-if="recommendation" v-bind="panelOptions" class="mb-4">
+						<PanelSection>
+							<template #header>
+								<h2>{{ t('reviewer.article.recommendation') }}</h2>
+							</template>
+							<p>{{ recommendation }}</p>
+						</PanelSection>
+					</Panel>
+
+					<Panel v-if="reviewComments.length" v-bind="panelOptions" class="mb-4">
+						<PanelSection>
+							<template #header>
+								<h2>{{ t('reviewer.submission.comments.review') }}</h2>
+							</template>
+							<p v-for="reviewComment in reviewComments">
+								<b v-if="reviewComment.isViewable">{{ t('reviewer.submission.comments.authorAndEditor') }}</b>
+								<b v-else>{{ t('reviewer.submission.comments.editorOnly') }}</b>
+								{{ reviewComment.content }}
+							</p>
+						</PanelSection>
+					</Panel>
+
+					<Panel v-bind="panelOptions" class="mb-4">
+						<PanelSection>
+							<template #header>
+								<h2>{{ t('manager.setup.generalInformation') }}</h2>
+							</template>
+							<List>
+								<ListItem>
+									<b>{{ t('reviewer.submission.reviewRequestDate') }}:</b> {{ formatShortDate(dateNotified) }}
+								</ListItem>
+								<ListItem>
+									<b>{{ t('reviewer.submission.responseDueDate') }}:</b> {{ formatShortDate(dateResponseDue) }}
+								</ListItem>
+								<ListItem>
+									<b>{{ t('reviewer.submission.reviewDueDate') }}:</b> {{ formatShortDate(dateDue) }}
+								</ListItem>
+								<ListItem>
+									<b>{{ t('common.dateCompleted') }}:</b> {{ formatShortDate(dateCompleted) }}
+								</ListItem>
+							</List>
+						</PanelSection>
+					</Panel>
+
+					<div v-if="hasAttachments" class="mb-4">
+						<p>TODO: display attachments grid</p>
+					</div>
+
+					<div v-if="hasFiles" class="mb-4">
+						<p>TODO: display files grid</p>
 					</div>
 				</div>
 			</div>
@@ -21,13 +96,39 @@ import {defineProps} from 'vue';
 import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import {useTranslation} from '@/composables/useTranslation';
 import {useRoundHistoryModalStore} from './roundHistoryModalStore';
+import moment from 'moment';
+import List from "@/components/List/List.vue";
+import ListItem from "@/components/List/ListItem.vue";
+
+function formatShortDate(dateString) {
+	return moment(dateString).format('YYYY-MM-DD');
+}
+
+const isReviewAssignmentDeclined = false;
+const reviewComments = [
+	{'isViewable': true, 'content': 'Comment #1'},
+	{'isViewable': false, 'content': 'Comment #2'},
+	{'isViewable': true, 'content': 'Comment #3'},
+];
+const dateConfirmed = '2024-12-25 12:00:00';
+const dateNotified = '2024-01-17 12:00:00';
+const dateResponseDue = '2023-06-24 12:00:00';
+const dateDue = '2025-12-31 12:00:00';
+const dateCompleted = '2025-02-14 12:00:00';
+const hasAttachments = true;
+const hasFiles = true;
+const declinedEmail = {'subject': 'Email Subject', 'body': 'Email Body'};
+const recommendation = "This is the recommendation";
+
+const panelOptions = { stack: true };
 
 const props = defineProps({
 	submissionId: {type: Number, required: true},
 	reviewRoundId: {type: Number, required: true},
+	reviewRoundNumber: {type: Number, required: true},
 });
 
-const {localize} = useTranslation();
+const {t, localize} = useTranslation();
 
 const store = useRoundHistoryModalStore(props);
 </script>
diff --git a/src/pages/reviewerSubmission/reviewerSubmissionPageStore.js b/src/pages/reviewerSubmission/reviewerSubmissionPageStore.js
index 4a8ae5c30..d652bdd42 100644
--- a/src/pages/reviewerSubmission/reviewerSubmissionPageStore.js
+++ b/src/pages/reviewerSubmission/reviewerSubmissionPageStore.js
@@ -6,8 +6,8 @@ export const useReviewerSubmissionPageStore = defineComponentStore(
 	(pageInitConfig) => {
 		const isRoundHistoryModalOpened = ref(false);
 		const roundHistoryModalProps = ref(null);
-		function openRoundHistoryModal({submissionId, reviewRoundId}) {
-			roundHistoryModalProps.value = {submissionId, reviewRoundId};
+		function openRoundHistoryModal({submissionId, reviewRoundId, reviewRoundNumber}) {
+			roundHistoryModalProps.value = {submissionId, reviewRoundId, reviewRoundNumber};
 			isRoundHistoryModalOpened.value = true;
 		}
 		function closeRoundHistoryModal() {
diff --git a/src/pages/reviewerSubmission/roundHistoryModalStore.js b/src/pages/reviewerSubmission/roundHistoryModalStore.js
index 4327b5e07..d99a62de6 100644
--- a/src/pages/reviewerSubmission/roundHistoryModalStore.js
+++ b/src/pages/reviewerSubmission/roundHistoryModalStore.js
@@ -18,6 +18,7 @@ export const useRoundHistoryModalStore = defineComponentStore(
 			submission,
 			submissionId: props.submissionId,
 			reviewRoundId: props.reviewRoundId,
+			reviewRoundNumber: props.reviewRoundNumber,
 		};
 	},
 );

From 05b3554c7d51ea2ccdbdcbee5c142116478e1432 Mon Sep 17 00:00:00 2001
From: Nicolas Boulay <nibou230@ulaval.ca>
Date: Fri, 19 Jan 2024 10:21:25 -0500
Subject: [PATCH 02/13] pkp/pkp-lib#9453 Connect the new API for the round
 history

---
 .../ReviewerSubmissionPage.vue                |  2 +-
 .../reviewerSubmission/RoundHistoryModal.vue  | 79 +++++++++----------
 .../roundHistoryModalStore.js                 | 13 +--
 3 files changed, 46 insertions(+), 48 deletions(-)

diff --git a/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue b/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
index 5d719802e..b433a4aa3 100644
--- a/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
+++ b/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
@@ -8,7 +8,7 @@
 			:key="review.reviewRoundId"
 			@click="store.openRoundHistoryModal(review)"
 		>
-			{{ t('submission.round', {round: review.reviewRoundNumber}) }}
+			{{ t('common.reviewRoundNumber', {round: review.reviewRoundNumber}) }}
 		</PkpButton>
 	</div>
 	<SideModal
diff --git a/src/pages/reviewerSubmission/RoundHistoryModal.vue b/src/pages/reviewerSubmission/RoundHistoryModal.vue
index f4611c9e1..b152d807c 100644
--- a/src/pages/reviewerSubmission/RoundHistoryModal.vue
+++ b/src/pages/reviewerSubmission/RoundHistoryModal.vue
@@ -1,58 +1,71 @@
 <template>
-	<SideModalBody>
+	<SideModalBody v-if="store.reviewRoundHistory">
 		<template #title>
 			<h1>{{ t('reviewer.submission.reviewRound.info.history') }}</h1>
 		</template>
-		<template v-if="store.submission" #description>
+		<template v-if="store.reviewRoundHistory.publicationTitle" #description>
 			<h2>
 				{{ t(
 					'reviewer.submission.reviewRound.info.modal.title',
-					{reviewRoundNumber: store.reviewRoundNumber, submissionTitle: localize(store.submission.publications[0].title)}
+					{reviewRoundNumber: store.reviewRoundNumber, submissionTitle: store.reviewRoundHistory.publicationTitle}
 				) }}
 			</h2>
 		</template>
 		<div class="p-4">
 			<div class="bg-lightest p-5">
-				<div v-if="isReviewAssignmentDeclined">
+				<div v-if="store.reviewRoundHistory.reviewAssignment.declined">
 					<Panel v-bind="panelOptions" class="mb-4">
 						<PanelSection>
 							<template #header>
-								<h2>{{ t('reviewer.submission.reviewDeclineDate') }}</h2>
+								<h2>{{ t('reviewer.submission.reviewRound.reviewDeclineDate') }}</h2>
 							</template>
-							<p>{{ formatShortDate(dateConfirmed) }}</p>
+							<p>{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateConfirmed) }}</p>
 						</PanelSection>
 					</Panel>
 
-					<Panel v-if="declinedEmail" v-bind="panelOptions" class="mb-4">
+					<Panel v-if="store.reviewRoundHistory.declineEmail" v-bind="panelOptions" class="mb-4">
 						<PanelSection>
 							<template #header>
-								<h2>{{ t('reviewer.submission.emailLog') }}</h2>
+								<h2>{{ t('reviewer.submission.reviewRound.emailLog') }}</h2>
 							</template>
-							<p>{{ declinedEmail.subject }}<br />{{ declinedEmail.body }}</p>
+							<p v-html="store.reviewRoundHistory.declineEmail.subject" class="mb-4 font-bold"></p>
+							<hr class="opacity-50">
+							<p v-html="store.reviewRoundHistory.declineEmail.body" class="mt-4"></p>
 						</PanelSection>
 					</Panel>
-					<p v-else>{{ t('reviewer.submission.emailLog.defaultMessage') }}</p>
+					<p v-else>{{ t('reviewer.submission.reviewRound.emailLog.defaultMessage') }}</p>
 				</div>
 				<div v-else>
-					<Panel v-if="recommendation" v-bind="panelOptions" class="mb-4">
+					<Panel v-if="store.reviewRoundHistory.reviewAssignment.recommendation" v-bind="panelOptions" class="mb-4">
 						<PanelSection>
 							<template #header>
 								<h2>{{ t('reviewer.article.recommendation') }}</h2>
 							</template>
-							<p>{{ recommendation }}</p>
+							<p>{{ store.reviewRoundHistory.reviewAssignment.recommendation }}</p>
 						</PanelSection>
 					</Panel>
 
-					<Panel v-if="reviewComments.length" v-bind="panelOptions" class="mb-4">
+					<Panel v-if="store.reviewRoundHistory.comments.length || store.reviewRoundHistory.privateComments.length" v-bind="panelOptions" class="mb-4">
 						<PanelSection>
 							<template #header>
-								<h2>{{ t('reviewer.submission.comments.review') }}</h2>
+								<h2>{{ t('reviewer.submission.reviewRound.comments.review') }}</h2>
 							</template>
-							<p v-for="reviewComment in reviewComments">
-								<b v-if="reviewComment.isViewable">{{ t('reviewer.submission.comments.authorAndEditor') }}</b>
-								<b v-else>{{ t('reviewer.submission.comments.editorOnly') }}</b>
-								{{ reviewComment.content }}
-							</p>
+							<PanelSection v-if="store.reviewRoundHistory.comments.length">
+								<template #header>
+									<h3>{{ t('reviewer.submission.reviewRound.comments.authorAndEditor') }}</h3>
+								</template>
+								<p v-for="reviewComment in store.reviewRoundHistory.comments">
+									{{ reviewComment }}
+								</p>
+							</PanelSection>
+							<PanelSection v-if="store.reviewRoundHistory.privateComments.length">
+								<template #header>
+									<h3>{{ t('reviewer.submission.reviewRound.comments.editorOnly') }}</h3>
+								</template>
+								<p v-for="reviewComment in store.reviewRoundHistory.privateComments">
+									{{ reviewComment }}
+								</p>
+							</PanelSection>
 						</PanelSection>
 					</Panel>
 
@@ -63,26 +76,26 @@
 							</template>
 							<List>
 								<ListItem>
-									<b>{{ t('reviewer.submission.reviewRequestDate') }}:</b> {{ formatShortDate(dateNotified) }}
+									<p class="inline pr-2 font-bold">{{ t('reviewer.submission.reviewRequestDate') }}</p>{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateNotified) }}
 								</ListItem>
 								<ListItem>
-									<b>{{ t('reviewer.submission.responseDueDate') }}:</b> {{ formatShortDate(dateResponseDue) }}
+									<p class="inline pr-2 font-bold">{{ t('reviewer.submission.responseDueDate') }}</p>{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateResponseDue) }}
 								</ListItem>
 								<ListItem>
-									<b>{{ t('reviewer.submission.reviewDueDate') }}:</b> {{ formatShortDate(dateDue) }}
+									<p class="inline pr-2 font-bold">{{ t('reviewer.submission.reviewDueDate') }}</p>{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateDue) }}
 								</ListItem>
 								<ListItem>
-									<b>{{ t('common.dateCompleted') }}:</b> {{ formatShortDate(dateCompleted) }}
+									<p class="inline pr-2 font-bold">{{ t('common.dateCompleted') }}</p>{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateCompleted) }}
 								</ListItem>
 							</List>
 						</PanelSection>
 					</Panel>
 
-					<div v-if="hasAttachments" class="mb-4">
+					<div class="mb-4">
 						<p>TODO: display attachments grid</p>
 					</div>
 
-					<div v-if="hasFiles" class="mb-4">
+					<div v-if="store.reviewRoundHistory.displayFiles" class="mb-4">
 						<p>TODO: display files grid</p>
 					</div>
 				</div>
@@ -104,22 +117,6 @@ function formatShortDate(dateString) {
 	return moment(dateString).format('YYYY-MM-DD');
 }
 
-const isReviewAssignmentDeclined = false;
-const reviewComments = [
-	{'isViewable': true, 'content': 'Comment #1'},
-	{'isViewable': false, 'content': 'Comment #2'},
-	{'isViewable': true, 'content': 'Comment #3'},
-];
-const dateConfirmed = '2024-12-25 12:00:00';
-const dateNotified = '2024-01-17 12:00:00';
-const dateResponseDue = '2023-06-24 12:00:00';
-const dateDue = '2025-12-31 12:00:00';
-const dateCompleted = '2025-02-14 12:00:00';
-const hasAttachments = true;
-const hasFiles = true;
-const declinedEmail = {'subject': 'Email Subject', 'body': 'Email Body'};
-const recommendation = "This is the recommendation";
-
 const panelOptions = { stack: true };
 
 const props = defineProps({
diff --git a/src/pages/reviewerSubmission/roundHistoryModalStore.js b/src/pages/reviewerSubmission/roundHistoryModalStore.js
index d99a62de6..29fa14d6e 100644
--- a/src/pages/reviewerSubmission/roundHistoryModalStore.js
+++ b/src/pages/reviewerSubmission/roundHistoryModalStore.js
@@ -6,16 +6,17 @@ import {useFetch} from '@/composables/useFetch';
 export const useRoundHistoryModalStore = defineComponentStore(
 	'roundHistoryModal',
 	(props) => {
-		const {apiUrl: submissionApiUrl} = useApiUrl(
-			`submissions/${props.submissionId}`,
+		const {apiUrl: reviewRoundHistoryApiUrl} = useApiUrl(
+			`reviews/history/${props.submissionId}/${props.reviewRoundId}`,
+		);
+		const {fetch: fetchReviewRoundHistory, data: reviewRoundHistory} = useFetch(
+			reviewRoundHistoryApiUrl
 		);
-		const {fetch: fetchSubmission, data: submission} =
-			useFetch(submissionApiUrl);
 
-		fetchSubmission();
+		fetchReviewRoundHistory();
 
 		return {
-			submission,
+			reviewRoundHistory,
 			submissionId: props.submissionId,
 			reviewRoundId: props.reviewRoundId,
 			reviewRoundNumber: props.reviewRoundNumber,

From ae8c33398557893ad1d0da8e8d8252ccc1d291f4 Mon Sep 17 00:00:00 2001
From: Nicolas Boulay <nibou230@ulaval.ca>
Date: Fri, 19 Jan 2024 11:16:06 -0500
Subject: [PATCH 03/13] pkp/pkp-lib#9453 Use the localized recommandation value

---
 src/pages/reviewerSubmission/RoundHistoryModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/reviewerSubmission/RoundHistoryModal.vue b/src/pages/reviewerSubmission/RoundHistoryModal.vue
index b152d807c..9365c294c 100644
--- a/src/pages/reviewerSubmission/RoundHistoryModal.vue
+++ b/src/pages/reviewerSubmission/RoundHistoryModal.vue
@@ -36,12 +36,12 @@
 					<p v-else>{{ t('reviewer.submission.reviewRound.emailLog.defaultMessage') }}</p>
 				</div>
 				<div v-else>
-					<Panel v-if="store.reviewRoundHistory.reviewAssignment.recommendation" v-bind="panelOptions" class="mb-4">
+					<Panel v-if="store.reviewRoundHistory.recommendation" v-bind="panelOptions" class="mb-4">
 						<PanelSection>
 							<template #header>
 								<h2>{{ t('reviewer.article.recommendation') }}</h2>
 							</template>
-							<p>{{ store.reviewRoundHistory.reviewAssignment.recommendation }}</p>
+							<p>{{ store.reviewRoundHistory.recommendation }}</p>
 						</PanelSection>
 					</Panel>
 

From 0a4167f1d504530e4969be112b0070bda5b91630 Mon Sep 17 00:00:00 2001
From: Nicolas Boulay <nibou230@ulaval.ca>
Date: Fri, 19 Jan 2024 14:53:53 -0500
Subject: [PATCH 04/13] pkp/pkp-lib#9453 Show review comments as HTML

---
 src/pages/reviewerSubmission/RoundHistoryModal.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/pages/reviewerSubmission/RoundHistoryModal.vue b/src/pages/reviewerSubmission/RoundHistoryModal.vue
index 9365c294c..92491a09d 100644
--- a/src/pages/reviewerSubmission/RoundHistoryModal.vue
+++ b/src/pages/reviewerSubmission/RoundHistoryModal.vue
@@ -54,17 +54,13 @@
 								<template #header>
 									<h3>{{ t('reviewer.submission.reviewRound.comments.authorAndEditor') }}</h3>
 								</template>
-								<p v-for="reviewComment in store.reviewRoundHistory.comments">
-									{{ reviewComment }}
-								</p>
+								<p v-for="reviewComment in store.reviewRoundHistory.comments" v-html="reviewComment"></p>
 							</PanelSection>
 							<PanelSection v-if="store.reviewRoundHistory.privateComments.length">
 								<template #header>
 									<h3>{{ t('reviewer.submission.reviewRound.comments.editorOnly') }}</h3>
 								</template>
-								<p v-for="reviewComment in store.reviewRoundHistory.privateComments">
-									{{ reviewComment }}
-								</p>
+								<p v-for="reviewComment in store.reviewRoundHistory.privateComments" v-html="reviewComment"></p>
 							</PanelSection>
 						</PanelSection>
 					</Panel>

From 794cc6ed4714fa34da2111038486fd1367c53da4 Mon Sep 17 00:00:00 2001
From: Nicolas Boulay <nibou230@ulaval.ca>
Date: Thu, 1 Feb 2024 15:33:42 -0500
Subject: [PATCH 05/13] pkp/pkp-lib#9453 Refactor the round history UI to
 follow the proper design

---
 .../ReviewerSubmissionPage.vue                |  33 ++--
 .../reviewerSubmission/RoundHistoryModal.vue  | 147 ++++++++++--------
 2 files changed, 108 insertions(+), 72 deletions(-)

diff --git a/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue b/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
index b433a4aa3..5634e292a 100644
--- a/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
+++ b/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
@@ -1,15 +1,24 @@
 <template>
-	<div class="mb-4 space-x-2">
-		<span class="bg-medium text-lg-normal">
-			{{ t('reviewer.submission.reviewRound.info') }}
-		</span>
-		<PkpButton
+	<div class="panel p-8 mb-4">
+		<h2>{{ t('reviewer.submission.reviewRound.info') }}</h2>
+		<p
 			v-for="review in store.reviewRoundHistories"
 			:key="review.reviewRoundId"
-			@click="store.openRoundHistoryModal(review)"
 		>
-			{{ t('common.reviewRoundNumber', {round: review.reviewRoundNumber}) }}
-		</PkpButton>
+			<span class="text-lg-normal">
+				{{ t(
+					'reviewer.submission.reviewRound.info.submittedOn',
+					{round: review.reviewRoundNumber, submittedOn: formatShortDate(review.submittedOn)}
+				) }}
+			</span>
+			<PkpButton
+				is-link="true"
+				class="ml-4"
+				@click="store.openRoundHistoryModal(review)"
+			>
+				{{ t('reviewer.submission.reviewRound.info.read', {round: review.reviewRoundNumber}) }}
+			</PkpButton>
+		</p>
 	</div>
 	<SideModal
 		:open="store.isRoundHistoryModalOpened"
@@ -23,13 +32,15 @@
 
 <script setup>
 import {defineProps} from 'vue';
-
 import SideModal from '@/components/Modal/SideModal.vue';
 import RoundHistoryModal from './RoundHistoryModal.vue';
-
 import {useTranslation} from '@/composables/useTranslation';
-
 import {useReviewerSubmissionPageStore} from './reviewerSubmissionPageStore';
+import moment from 'moment';
+
+function formatShortDate(dateString) {
+	return moment(dateString).format('DD-MM-YYYY');
+}
 
 const {t} = useTranslation();
 
diff --git a/src/pages/reviewerSubmission/RoundHistoryModal.vue b/src/pages/reviewerSubmission/RoundHistoryModal.vue
index 92491a09d..8b423bbdb 100644
--- a/src/pages/reviewerSubmission/RoundHistoryModal.vue
+++ b/src/pages/reviewerSubmission/RoundHistoryModal.vue
@@ -1,18 +1,18 @@
 <template>
 	<SideModalBody v-if="store.reviewRoundHistory">
+		<template v-if="store.reviewRoundHistory.reviewAssignment" #pre-title>
+			{{ store.reviewRoundHistory.reviewAssignment.submissionId }}
+		</template>
 		<template #title>
-			<h1>{{ t('reviewer.submission.reviewRound.info.history') }}</h1>
+			<h1 class="underline">
+				{{ t('reviewer.submission.reviewRound.info.modal.title', {round: store.reviewRoundNumber}) }}
+			</h1>
 		</template>
 		<template v-if="store.reviewRoundHistory.publicationTitle" #description>
-			<h2>
-				{{ t(
-					'reviewer.submission.reviewRound.info.modal.title',
-					{reviewRoundNumber: store.reviewRoundNumber, submissionTitle: store.reviewRoundHistory.publicationTitle}
-				) }}
-			</h2>
+			{{ store.reviewRoundHistory.publicationTitle }}
 		</template>
-		<div class="p-4">
-			<div class="bg-lightest p-5">
+		<SideModalLayout2Columns>
+			<template #left>
 				<div v-if="store.reviewRoundHistory.reviewAssignment.declined">
 					<Panel v-bind="panelOptions" class="mb-4">
 						<PanelSection>
@@ -45,72 +45,97 @@
 						</PanelSection>
 					</Panel>
 
-					<Panel v-if="store.reviewRoundHistory.comments.length || store.reviewRoundHistory.privateComments.length" v-bind="panelOptions" class="mb-4">
-						<PanelSection>
-							<template #header>
-								<h2>{{ t('reviewer.submission.reviewRound.comments.review') }}</h2>
-							</template>
-							<PanelSection v-if="store.reviewRoundHistory.comments.length">
-								<template #header>
-									<h3>{{ t('reviewer.submission.reviewRound.comments.authorAndEditor') }}</h3>
-								</template>
-								<p v-for="reviewComment in store.reviewRoundHistory.comments" v-html="reviewComment"></p>
-							</PanelSection>
-							<PanelSection v-if="store.reviewRoundHistory.privateComments.length">
-								<template #header>
-									<h3>{{ t('reviewer.submission.reviewRound.comments.editorOnly') }}</h3>
-								</template>
-								<p v-for="reviewComment in store.reviewRoundHistory.privateComments" v-html="reviewComment"></p>
-							</PanelSection>
-						</PanelSection>
-					</Panel>
-
-					<Panel v-bind="panelOptions" class="mb-4">
-						<PanelSection>
-							<template #header>
-								<h2>{{ t('manager.setup.generalInformation') }}</h2>
-							</template>
-							<List>
-								<ListItem>
-									<p class="inline pr-2 font-bold">{{ t('reviewer.submission.reviewRequestDate') }}</p>{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateNotified) }}
-								</ListItem>
-								<ListItem>
-									<p class="inline pr-2 font-bold">{{ t('reviewer.submission.responseDueDate') }}</p>{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateResponseDue) }}
-								</ListItem>
-								<ListItem>
-									<p class="inline pr-2 font-bold">{{ t('reviewer.submission.reviewDueDate') }}</p>{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateDue) }}
-								</ListItem>
-								<ListItem>
-									<p class="inline pr-2 font-bold">{{ t('common.dateCompleted') }}</p>{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateCompleted) }}
-								</ListItem>
-							</List>
-						</PanelSection>
-					</Panel>
-
-					<div class="mb-4">
-						<p>TODO: display attachments grid</p>
+					<div v-if="store.reviewRoundHistory.comments.length || store.reviewRoundHistory.privateComments.length" class="border border-light mb-4">
+						<div class="border-b border-light p-4">
+							<h2 class="text-2xl-bold">{{ t('reviewer.submission.reviewRound.comments') }}</h2>
+						</div>
+						<div v-if="store.reviewRoundHistory.comments.length" class="border-b border-light p-4">
+							<h2 class="text-xl-bold text-light mb-4">{{ t('reviewer.submission.reviewRound.comments.authorAndEditor') }}</h2>
+							<p v-for="(reviewComment, index) in store.reviewRoundHistory.comments">
+								<span class="text-xl-bold">{{ t('reviewer.submission.reviewRound.comments.prefix', {index: index + 1}) }}</span>
+								<span v-html="reviewComment"></span>
+							</p>
+						</div>
+						<div v-if="store.reviewRoundHistory.privateComments.length" class="p-4">
+							<h2 class="text-xl-bold text-light mb-4">{{ t('reviewer.submission.reviewRound.comments.editorOnly') }}</h2>
+							<p v-for="(reviewComment, index) in store.reviewRoundHistory.privateComments">
+								<span class="text-xl-bold">{{ t('reviewer.submission.reviewRound.comments.prefix', {index: index + 1}) }}</span>
+								<span v-html="reviewComment"></span>
+							</p>
+						</div>
 					</div>
 
-					<div v-if="store.reviewRoundHistory.displayFiles" class="mb-4">
-						<p>TODO: display files grid</p>
-					</div>
+					<ListingFilesListPanel
+						v-if="store.reviewRoundHistory.attachments.length"
+						class="mb-4"
+						:title="t('reviewer.submission.reviewRound.attachments')"
+						:description="t('reviewer.submission.reviewRound.attachments.description')"
+						:files="store.reviewRoundHistory.attachments"
+					></ListingFilesListPanel>
+
+					<ListingFilesListPanel
+						v-if="store.reviewRoundHistory.files.length"
+						:title="t('reviewer.submission.reviewRound.files')"
+						:description="t('reviewer.submission.reviewRound.files.description')"
+						:files="store.reviewRoundHistory.files"
+					></ListingFilesListPanel>
+				</div>
+			</template>
+			<template #right1>
+				<div class="text-xl-bold">{{ t('reviewer.submission.reviewRound.metadata') }}</div>
+				<div v-if="store.reviewRoundHistory.publicationType" class="mt-4">
+					<div class="text-lg-bold">{{ t('reviewer.submission.reviewRound.metadata.type') }}:</div>
+					<div class="text-base-normal mt-1">{{ store.reviewRoundHistory.publicationType }}</div>
+				</div>
+				<div v-if="store.reviewRoundHistory.publicationAbstract" class="mt-4">
+					<div class="text-lg-bold">{{ t('reviewer.submission.reviewRound.metadata.abstract') }}:</div>
+					<div v-html="store.reviewRoundHistory.publicationAbstract" class="text-base-normal mt-1"></div>
+				</div>
+				<div v-if="store.reviewRoundHistory.publicationKeywords" class="mt-4">
+					<div class="text-lg-bold">{{ t('reviewer.submission.reviewRound.metadata.keywords') }}:</div>
+					<div class="text-base-normal mt-1">{{ store.reviewRoundHistory.publicationKeywords }}</div>
+				</div>
+			</template>
+			<template v-if="store.reviewRoundHistory.reviewAssignment" #right2>
+				<div class="text-xl-bold">
+					{{ t('reviewer.submission.reviewRound.general') }}
+				</div>
+				<div v-if="store.reviewRoundHistory.reviewAssignment.dateNotified" class="mt-4">
+					<div class="text-lg-bold">{{ t('reviewer.submission.reviewRequestDate') }}:</div>
+					<div class="text-base-normal mt-1">{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateNotified) }}</div>
+				</div>
+				<div v-if="store.reviewRoundHistory.reviewAssignment.dateResponseDue" class="mt-4">
+					<div class="text-lg-bold">{{ t('reviewer.submission.responseDueDate') }}:</div>
+					<div class="text-base-normal mt-1">{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateResponseDue) }}</div>
+				</div>
+				<div v-if="store.reviewRoundHistory.reviewAssignment.dateConfirmed" class="mt-4">
+					<div class="text-lg-bold">{{ t('reviewer.submission.acceptedOn') }}:</div>
+					<div class="text-base-normal mt-1">{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateConfirmed) }}</div>
+				</div>
+				<div v-if="store.reviewRoundHistory.reviewAssignment.dateDue" class="mt-4">
+					<div class="text-lg-bold">{{ t('reviewer.submission.reviewDueDate') }}:</div>
+					<div class="text-base-normal mt-1">{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateDue) }}</div>
+				</div>
+				<div v-if="store.reviewRoundHistory.reviewAssignment.dateCompleted" class="mt-4">
+					<div class="text-lg-bold">{{ t('reviewer.submission.submittedOn') }}:</div>
+					<div class="text-base-normal mt-1">{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateCompleted) }}</div>
 				</div>
-			</div>
-		</div>
+			</template>
+		</SideModalLayout2Columns>
 	</SideModalBody>
 </template>
 
 <script setup>
 import {defineProps} from 'vue';
 import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayout2Columns from "@/components/Modal/SideModalLayout2Columns.vue";
+import ListingFilesListPanel from "@/components/ListPanel/listingFiles/ListingFilesListPanel.vue";
 import {useTranslation} from '@/composables/useTranslation';
 import {useRoundHistoryModalStore} from './roundHistoryModalStore';
 import moment from 'moment';
-import List from "@/components/List/List.vue";
-import ListItem from "@/components/List/ListItem.vue";
 
 function formatShortDate(dateString) {
-	return moment(dateString).format('YYYY-MM-DD');
+	return moment(dateString).format('DD-MM-YYYY');
 }
 
 const panelOptions = { stack: true };

From 95433768798205e0e1684e914190321d2919425e Mon Sep 17 00:00:00 2001
From: Nicolas Boulay <nibou230@ulaval.ca>
Date: Fri, 2 Feb 2024 09:25:42 -0500
Subject: [PATCH 06/13] pkp/pkp-lib#9453 Fix the download URL for file
 component

---
 src/components/File/File.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/File/File.vue b/src/components/File/File.vue
index e44e4ba6e..caffda5c3 100644
--- a/src/components/File/File.vue
+++ b/src/components/File/File.vue
@@ -5,7 +5,7 @@
 			{{ fileId }}
 		</span>
 		<span class="ms-1">
-			<a v-if="url" class="underline" href="url" target="_blank">{{ name }}</a>
+			<a v-if="url" class="underline" :href="url" target="_blank">{{ name }}</a>
 			<template v-else>
 				{{ name }}
 			</template>
@@ -35,7 +35,6 @@ export default {
 			type: String,
 			required: true,
 		},
-
 		/** Optional. If the file should be be url to download file */
 		url: {
 			type: String,

From d50000a90ef7a8c8824866ebbf4ab27966a2393b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Thu, 8 Feb 2024 14:29:02 +0100
Subject: [PATCH 07/13] pkp/pkp-lib#9453 Adding ReviewerSubmissionPage to
 storybook

---
 public/globals.js                             |  44 ++++++-
 .../ReviewerSubmissionPage.mdx                |  13 ++
 .../ReviewerSubmissionPage.stories.js         |  66 +++++++++++
 src/pages/reviewerSubmission/mocks/review1.js | 111 ++++++++++++++++++
 src/pages/reviewerSubmission/mocks/review2.js |  47 ++++++++
 5 files changed, 280 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/reviewerSubmission/ReviewerSubmissionPage.mdx
 create mode 100644 src/pages/reviewerSubmission/ReviewerSubmissionPage.stories.js
 create mode 100644 src/pages/reviewerSubmission/mocks/review1.js
 create mode 100644 src/pages/reviewerSubmission/mocks/review2.js

diff --git a/public/globals.js b/public/globals.js
index 0bc3d1468..9c579e714 100644
--- a/public/globals.js
+++ b/public/globals.js
@@ -27,7 +27,6 @@ window.pkp = {
 	context: {
 		apiBaseUrl: 'https://mock/index.php/publicknowledge/api/v1/',
 	},
-
 	/**
 	 * Dummy constants required by components
 	 */
@@ -104,6 +103,7 @@ window.pkp = {
 		'common.commaListSeparator': ', ',
 		'common.delete': 'Delete',
 		'common.description': 'Description',
+		'common.download': 'Download',
 		'common.edit': 'Edit',
 		'common.editItem': 'Edit {$name}',
 		'common.error': 'Error',
@@ -143,6 +143,7 @@ window.pkp = {
 		'common.type': 'Type',
 		'common.unknownError':
 			'An unexpected error has occurred. Please reload the page and try again.',
+		'common.upload': 'Upload',
 		'common.uploadedBy': 'Uploaded by {$name}',
 		'common.uploadedByAndWhen': 'Uploaded by {$name} on {$date}',
 		'common.view': 'View',
@@ -250,9 +251,49 @@ window.pkp = {
 		'manager.dois.update.success': 'DOI(s) successfully updated',
 		'navigation.backTo': '\u27f5 Back to {$page}',
 		'navigation.submissions': 'Submissions',
+		'publication.jats.autoCreatedMessage':
+			'This JATS file is generated automatically by the submission metadata',
+		'publication.jats.confirmDeleteFileButton': 'Delete JATS File',
+		'publication.jats.confirmDeleteFileMessage':
+			'You are about to remove the existing JATS XML File from this publication. Are you sure?',
+		'publication.jats.confirmDeleteFileTitle': 'Confirm deleting JATS XML',
+		'publication.jats.lastModified':
+			'Last Modification at {$modificationDate} by {$username}',
 		'publication.status.published': 'Published',
 		'publication.status.unpublished': 'Unpublished',
 		'publication.version': 'Version {$version}',
+		'reviewer.article.recommendation': 'Recommendation',
+		'reviewer.submission.acceptedOn': 'Review Accepted On',
+		'reviewer.submission.responseDueDate': 'Response Due Date',
+		'reviewer.submission.reviewDueDate': 'Review Due Date',
+		'reviewer.submission.reviewRequestDate': "Editor's Request",
+		'reviewer.submission.reviewRound.attachments': 'Attachments',
+		'reviewer.submission.reviewRound.attachments.description':
+			'These are files that you attached along with your review',
+		'reviewer.submission.reviewRound.comments': 'Reviewer Comments',
+		'reviewer.submission.reviewRound.comments.authorAndEditor':
+			'For editors and authors',
+		'reviewer.submission.reviewRound.comments.editorOnly': 'For editors only',
+		'reviewer.submission.reviewRound.comments.prefix': 'Comment {$index}: ',
+		'reviewer.submission.reviewRound.emailLog': 'Decline reason sent by email',
+		'reviewer.submission.reviewRound.emailLog.defaultMessage':
+			'No reason given to the decline of the review invitation.',
+		'reviewer.submission.reviewRound.files': 'Files For Review',
+		'reviewer.submission.reviewRound.files.description':
+			'These files were sent to you for review',
+		'reviewer.submission.reviewRound.general': 'General Information',
+		'reviewer.submission.reviewRound.info': 'Previous Reviews',
+		'reviewer.submission.reviewRound.info.modal.title':
+			'Round {$round} Review submitted by you for',
+		'reviewer.submission.reviewRound.info.read': 'Read Round {$round} Review',
+		'reviewer.submission.reviewRound.info.submittedOn':
+			'Round {$round} Review Submitted on {$submittedOn}',
+		'reviewer.submission.reviewRound.metadata': 'Article Metadata',
+		'reviewer.submission.reviewRound.metadata.abstract': 'Abstract',
+		'reviewer.submission.reviewRound.metadata.keywords': 'Keywords',
+		'reviewer.submission.reviewRound.metadata.type': 'Type',
+		'reviewer.submission.reviewRound.reviewDeclineDate': 'Declined Date',
+		'reviewer.submission.submittedOn': 'Review Submitted On',
 		'stats.countWithYearlyAverage': '{$count} ({$average}/year)',
 		'stats.descriptionForStat': 'Description for {$stat}',
 		'submission.list.assignEditor': 'Assign Editor',
@@ -274,6 +315,7 @@ window.pkp = {
 		'submission.list.reviewsCompleted': 'Assigned reviews completed',
 		'submission.list.revisionsSubmitted': 'Revisions submitted',
 		'submission.submit.newSubmissionSingle': 'New Submission',
+		'submission.upload.percentComplete': 'Uploading {$percent}% complete',
 		'submissions.incomplete': 'Incomplete',
 		'validator.required': 'This field is required.',
 	},
diff --git a/src/pages/reviewerSubmission/ReviewerSubmissionPage.mdx b/src/pages/reviewerSubmission/ReviewerSubmissionPage.mdx
new file mode 100644
index 000000000..aeb7019a1
--- /dev/null
+++ b/src/pages/reviewerSubmission/ReviewerSubmissionPage.mdx
@@ -0,0 +1,13 @@
+import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
+
+import * as ReviewerSubmissionPageStories from './ReviewerSubmissionPage.stories.js';
+
+<Meta of={ReviewerSubmissionPageStories} />
+
+# Reviewer Page
+
+Only reviews history for now, until rest of the page is migrated from old stack.
+
+## Server side configuration
+
+<ArgTypes />
diff --git a/src/pages/reviewerSubmission/ReviewerSubmissionPage.stories.js b/src/pages/reviewerSubmission/ReviewerSubmissionPage.stories.js
new file mode 100644
index 000000000..61b3e6457
--- /dev/null
+++ b/src/pages/reviewerSubmission/ReviewerSubmissionPage.stories.js
@@ -0,0 +1,66 @@
+import {within, userEvent} from '@storybook/testing-library';
+import {http, HttpResponse} from 'msw';
+
+import ReviewerSubmissionPage from './ReviewerSubmissionPage.vue';
+import Review1Mock from './mocks/review1';
+import Review2Mock from './mocks/review2';
+
+export default {
+	title: 'Pages/ReviewerSubmission',
+	component: ReviewerSubmissionPage,
+	render: (args) => ({
+		components: {ReviewerSubmissionPage},
+		setup() {
+			return {args};
+		},
+		template: '<ReviewerSubmissionPage v-bind="args.pageInitConfig" />',
+	}),
+	args: {
+		pageInitConfig: {
+			reviewRoundHistories: [
+				{
+					submissionId: 16,
+					reviewRoundId: 15,
+					reviewRoundNumber: 1,
+					submittedOn: '2024-02-08 12:45:38',
+				},
+				{
+					submissionId: 16,
+					reviewRoundId: 16,
+					reviewRoundNumber: 2,
+					submittedOn: '2024-02-08 12:51:12',
+				},
+			],
+		},
+	},
+	parameters: {
+		msw: {
+			handlers: [
+				http.get(
+					'https://mock/index.php/publicknowledge/api/v1/reviews/history/16/15',
+					async (r) => {
+						return HttpResponse.json(Review1Mock);
+					},
+				),
+				http.get(
+					'https://mock/index.php/publicknowledge/api/v1/reviews/history/16/16',
+					async (r) => {
+						return HttpResponse.json(Review2Mock);
+					},
+				),
+			],
+		},
+	},
+};
+
+export const Base = {};
+
+export const OpenModal = {
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(canvas.getByText('Read Round 2 Review'));
+	},
+};
diff --git a/src/pages/reviewerSubmission/mocks/review1.js b/src/pages/reviewerSubmission/mocks/review1.js
new file mode 100644
index 000000000..59cc37b93
--- /dev/null
+++ b/src/pages/reviewerSubmission/mocks/review1.js
@@ -0,0 +1,111 @@
+export default {
+	publicationTitle:
+		'Influence of long-term nutrition with different dietary fats on fatty acid composition of heavy pigs backfat',
+	publicationType: 'Articles',
+	publicationAbstract:
+		'Aim of this research is to provide a general situation of cattle slaughtered in Cameroon, as a representative example for the Central African Sub-region. The quality and safety of beef from the abattoir of Yaound\u00e9, the largest in Cameroon, were considered. From January 2009 to March 2012, the pre-slaughter conditions and characteristics of 1953 cattle carcasses were recorded, as well as the pH of m. longissimus thoracis 24 h after slaughter. From these carcasses, 60 were selected to represent the bulls slaughtered. The quality parameters and composition of m. longissimus thoracis were carried out. The origin of most of the cattle was the Guinea High Savannah (74.6%), and transhumance was the common production system (75.5%). Gudali (45.6%), White Fulani (33.3%) and Red Mbororo (20.3%) breeds were predominant. Carcass weight was affected by rearing system and cattle category, and it markedly varied during year. Considering meat quality, the fat content was low (1.2%) and similar between breeds, moreover Gudali showed the toughest meat. Of the cows slaughtered, 27% were pregnant and the most common abnormal conditions encountered were ectoparasites, fatigue, lameness, fungal-like skin lesions, enlarged lymph nodes, respiratory distress, nodular lesions. More than 20% of the carcasses had some organs condemned, mainly for liver flukes (5.17%), and 1.0% of them were completely condemned due to tuberculosis, that also affected 3.28% of lungs. These data could aid authorities draw up programmes with the aim to strengthen cattle production, improve beef supply, control and prevent the observed diseases, and promote the regional trade.',
+	publicationKeywords: 'cattle, food security',
+	declineEmail: null,
+	reviewAssignment: {
+		_href:
+			'http://localhost:7002/index.php/_/api/v1/_submissions/reviewAssignments/29',
+		cancelled: false,
+		comments: null,
+		competingInterests: null,
+		considered: null,
+		dateAcknowledged: null,
+		dateAssigned: '2024-02-08 12:41:43',
+		dateCompleted: '2024-02-08 12:45:38',
+		dateConfirmed: '2024-02-08 12:42:12',
+		dateDue: '2024-03-07 00:00:00',
+		dateNotified: '2024-02-08 12:41:44',
+		dateRated: null,
+		dateReminded: null,
+		dateResponseDue: '2024-03-07 00:00:00',
+		declined: false,
+		id: 29,
+		lastModified: '2024-02-08 12:45:38',
+		quality: null,
+		recommendation: 5,
+		reminderWasAutomatic: false,
+		requestResent: false,
+		reviewFormId: null,
+		reviewMethod: 2,
+		reviewRoundId: 15,
+		reviewerFullName: 'Paul Hudson',
+		reviewerId: 8,
+		round: 1,
+		stageId: 3,
+		step: 4,
+		submissionId: 16,
+	},
+	recommendation: 'Decline Submission',
+	comments: [
+		'<p>This is my <strong>feedback</strong> for author and editor.</p>',
+	],
+	privateComments: ['<p>This is my <strong>feedback</strong> for editor.</p>'],
+	attachments: [
+		{
+			_href:
+				'http://localhost:7002/index.php/publicknowledge/api/v1/submissions/16/files/46',
+			assocId: 29,
+			assocType: 517,
+			caption: null,
+			copyrightOwner: null,
+			createdAt: '2024-02-08 12:43:13',
+			creator: {
+				en: '',
+				fr_CA: '',
+			},
+			credit: null,
+			dateCreated: null,
+			dependentFiles: [],
+			description: {
+				en: '',
+				fr_CA: '',
+			},
+			documentType: 'pdf',
+			fileId: 28,
+			fileStage: 5,
+			genreId: null,
+			genreIsDependent: null,
+			genreIsSupplementary: null,
+			genreName: null,
+			id: 46,
+			language: null,
+			locale: 'en',
+			mimetype: 'application/pdf',
+			name: {
+				en: 'article_feedback.pdf',
+				fr_CA: '',
+			},
+			path: 'journals/1/articles/16/65c4cc615a962.pdf',
+			publisher: {
+				en: '',
+				fr_CA: '',
+			},
+			revisions: [],
+			source: {
+				en: '',
+				fr_CA: '',
+			},
+			sourceSubmissionFileId: null,
+			sponsor: {
+				en: '',
+				fr_CA: '',
+			},
+			subject: {
+				en: '',
+				fr_CA: '',
+			},
+			submissionId: 16,
+			terms: null,
+			updatedAt: '2024-02-08 12:43:19',
+			uploaderUserId: 8,
+			uploaderUserName: 'phudson',
+			url: 'http://localhost:7002/index.php/publicknowledge/$$$call$$$/api/file/file-api/download-file?submissionFileId=46&submissionId=16&stageId=3',
+			viewable: null,
+		},
+	],
+	files: [],
+};
diff --git a/src/pages/reviewerSubmission/mocks/review2.js b/src/pages/reviewerSubmission/mocks/review2.js
new file mode 100644
index 000000000..f46872064
--- /dev/null
+++ b/src/pages/reviewerSubmission/mocks/review2.js
@@ -0,0 +1,47 @@
+export default {
+	publicationTitle:
+		'Influence of long-term nutrition with different dietary fats on fatty acid composition of heavy pigs backfat',
+	publicationType: 'Articles',
+	publicationAbstract:
+		'Aim of this research is to provide a general situation of cattle slaughtered in Cameroon, as a representative example for the Central African Sub-region. The quality and safety of beef from the abattoir of Yaound\u00e9, the largest in Cameroon, were considered. From January 2009 to March 2012, the pre-slaughter conditions and characteristics of 1953 cattle carcasses were recorded, as well as the pH of m. longissimus thoracis 24 h after slaughter. From these carcasses, 60 were selected to represent the bulls slaughtered. The quality parameters and composition of m. longissimus thoracis were carried out. The origin of most of the cattle was the Guinea High Savannah (74.6%), and transhumance was the common production system (75.5%). Gudali (45.6%), White Fulani (33.3%) and Red Mbororo (20.3%) breeds were predominant. Carcass weight was affected by rearing system and cattle category, and it markedly varied during year. Considering meat quality, the fat content was low (1.2%) and similar between breeds, moreover Gudali showed the toughest meat. Of the cows slaughtered, 27% were pregnant and the most common abnormal conditions encountered were ectoparasites, fatigue, lameness, fungal-like skin lesions, enlarged lymph nodes, respiratory distress, nodular lesions. More than 20% of the carcasses had some organs condemned, mainly for liver flukes (5.17%), and 1.0% of them were completely condemned due to tuberculosis, that also affected 3.28% of lungs. These data could aid authorities draw up programmes with the aim to strengthen cattle production, improve beef supply, control and prevent the observed diseases, and promote the regional trade.',
+	publicationKeywords: 'cattle, food security',
+	declineEmail: null,
+	reviewAssignment: {
+		_href:
+			'http://localhost:7002/index.php/_/api/v1/_submissions/reviewAssignments/30',
+		cancelled: false,
+		comments: null,
+		competingInterests: null,
+		considered: null,
+		dateAcknowledged: null,
+		dateAssigned: '2024-02-08 12:47:38',
+		dateCompleted: '2024-02-08 12:51:12',
+		dateConfirmed: '2024-02-08 12:48:22',
+		dateDue: '2024-03-07 00:00:00',
+		dateNotified: '2024-02-08 12:47:40',
+		dateRated: null,
+		dateReminded: null,
+		dateResponseDue: '2024-03-07 00:00:00',
+		declined: false,
+		id: 30,
+		lastModified: '2024-02-08 12:51:12',
+		quality: null,
+		recommendation: 1,
+		reminderWasAutomatic: false,
+		requestResent: false,
+		reviewFormId: null,
+		reviewMethod: 2,
+		reviewRoundId: 16,
+		reviewerFullName: 'Paul Hudson',
+		reviewerId: 8,
+		round: 2,
+		stageId: 3,
+		step: 4,
+		submissionId: 16,
+	},
+	recommendation: 'Accept Submission',
+	comments: ['<p>For author and editor 2</p>'],
+	privateComments: ['<p>For editor 2</p>'],
+	attachments: [],
+	files: [],
+};

From bb4e773f810e771bebec37cc9367fe4a563c2f30 Mon Sep 17 00:00:00 2001
From: Nicolas Boulay <nibou230@ulaval.ca>
Date: Fri, 16 Feb 2024 15:43:36 -0500
Subject: [PATCH 08/13] pkp/pkp-lib#9453 Use tailwind instead of panels and
 localize data from the api

---
 .../ReviewerSubmissionPage.vue                |  4 +-
 .../reviewerSubmission/RoundHistoryModal.vue  | 50 +++++++------------
 2 files changed, 20 insertions(+), 34 deletions(-)

diff --git a/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue b/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
index 5634e292a..17b6b41ec 100644
--- a/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
+++ b/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="panel p-8 mb-4">
+	<div class="bg-lightest border border-light p-8 mb-4">
 		<h2>{{ t('reviewer.submission.reviewRound.info') }}</h2>
 		<p
 			v-for="review in store.reviewRoundHistories"
@@ -13,7 +13,7 @@
 			</span>
 			<PkpButton
 				is-link="true"
-				class="ml-4"
+				class="ms-4"
 				@click="store.openRoundHistoryModal(review)"
 			>
 				{{ t('reviewer.submission.reviewRound.info.read', {round: review.reviewRoundNumber}) }}
diff --git a/src/pages/reviewerSubmission/RoundHistoryModal.vue b/src/pages/reviewerSubmission/RoundHistoryModal.vue
index 8b423bbdb..b79d9a84a 100644
--- a/src/pages/reviewerSubmission/RoundHistoryModal.vue
+++ b/src/pages/reviewerSubmission/RoundHistoryModal.vue
@@ -9,41 +9,29 @@
 			</h1>
 		</template>
 		<template v-if="store.reviewRoundHistory.publicationTitle" #description>
-			{{ store.reviewRoundHistory.publicationTitle }}
+			{{ localize(store.reviewRoundHistory.publicationTitle) }}
 		</template>
 		<SideModalLayout2Columns>
 			<template #left>
 				<div v-if="store.reviewRoundHistory.reviewAssignment.declined">
-					<Panel v-bind="panelOptions" class="mb-4">
-						<PanelSection>
-							<template #header>
-								<h2>{{ t('reviewer.submission.reviewRound.reviewDeclineDate') }}</h2>
-							</template>
-							<p>{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateConfirmed) }}</p>
-						</PanelSection>
-					</Panel>
+					<div class="border border-light p-4 mb-4">
+						<h2 class="text-2xl-bold mb-4">{{ t('reviewer.submission.reviewRound.reviewDeclineDate') }}</h2>
+						<p>{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateConfirmed) }}</p>
+					</div>
 
-					<Panel v-if="store.reviewRoundHistory.declineEmail" v-bind="panelOptions" class="mb-4">
-						<PanelSection>
-							<template #header>
-								<h2>{{ t('reviewer.submission.reviewRound.emailLog') }}</h2>
-							</template>
-							<p v-html="store.reviewRoundHistory.declineEmail.subject" class="mb-4 font-bold"></p>
-							<hr class="opacity-50">
-							<p v-html="store.reviewRoundHistory.declineEmail.body" class="mt-4"></p>
-						</PanelSection>
-					</Panel>
+					<div v-if="store.reviewRoundHistory.declineEmail" class="border border-light p-4">
+						<h2 class="text-2xl-bold mb-4">{{ t('reviewer.submission.reviewRound.emailLog') }}</h2>
+						<p v-html="store.reviewRoundHistory.declineEmail.subject" class="font-bold mb-4"></p>
+						<hr class="opacity-50">
+						<p v-html="store.reviewRoundHistory.declineEmail.body" class="mt-4"></p>
+					</div>
 					<p v-else>{{ t('reviewer.submission.reviewRound.emailLog.defaultMessage') }}</p>
 				</div>
 				<div v-else>
-					<Panel v-if="store.reviewRoundHistory.recommendation" v-bind="panelOptions" class="mb-4">
-						<PanelSection>
-							<template #header>
-								<h2>{{ t('reviewer.article.recommendation') }}</h2>
-							</template>
-							<p>{{ store.reviewRoundHistory.recommendation }}</p>
-						</PanelSection>
-					</Panel>
+					<div v-if="store.reviewRoundHistory.recommendation" class="border border-light p-4 mb-4">
+						<h2 class="text-2xl-bold mb-4">{{ t('reviewer.article.recommendation') }}</h2>
+						<p>{{ store.reviewRoundHistory.recommendation }}</p>
+					</div>
 
 					<div v-if="store.reviewRoundHistory.comments.length || store.reviewRoundHistory.privateComments.length" class="border border-light mb-4">
 						<div class="border-b border-light p-4">
@@ -85,15 +73,15 @@
 				<div class="text-xl-bold">{{ t('reviewer.submission.reviewRound.metadata') }}</div>
 				<div v-if="store.reviewRoundHistory.publicationType" class="mt-4">
 					<div class="text-lg-bold">{{ t('reviewer.submission.reviewRound.metadata.type') }}:</div>
-					<div class="text-base-normal mt-1">{{ store.reviewRoundHistory.publicationType }}</div>
+					<div class="text-base-normal mt-1">{{ localize(store.reviewRoundHistory.publicationType) }}</div>
 				</div>
 				<div v-if="store.reviewRoundHistory.publicationAbstract" class="mt-4">
 					<div class="text-lg-bold">{{ t('reviewer.submission.reviewRound.metadata.abstract') }}:</div>
-					<div v-html="store.reviewRoundHistory.publicationAbstract" class="text-base-normal mt-1"></div>
+					<div v-html="localize(store.reviewRoundHistory.publicationAbstract)" class="text-base-normal mt-1"></div>
 				</div>
 				<div v-if="store.reviewRoundHistory.publicationKeywords" class="mt-4">
 					<div class="text-lg-bold">{{ t('reviewer.submission.reviewRound.metadata.keywords') }}:</div>
-					<div class="text-base-normal mt-1">{{ store.reviewRoundHistory.publicationKeywords }}</div>
+					<div class="text-base-normal mt-1">{{ localize(store.reviewRoundHistory.publicationKeywords).join(', ') }}</div>
 				</div>
 			</template>
 			<template v-if="store.reviewRoundHistory.reviewAssignment" #right2>
@@ -138,8 +126,6 @@ function formatShortDate(dateString) {
 	return moment(dateString).format('DD-MM-YYYY');
 }
 
-const panelOptions = { stack: true };
-
 const props = defineProps({
 	submissionId: {type: Number, required: true},
 	reviewRoundId: {type: Number, required: true},

From 960323b969cf01b4cb0aedf30b268b9c4eb64fe2 Mon Sep 17 00:00:00 2001
From: Nicolas Boulay <nibou230@ulaval.ca>
Date: Fri, 16 Feb 2024 15:56:10 -0500
Subject: [PATCH 09/13] pkp/pkp-lib#9453 Fix for chromatic

---
 src/pages/reviewerSubmission/RoundHistoryModal.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/reviewerSubmission/RoundHistoryModal.vue b/src/pages/reviewerSubmission/RoundHistoryModal.vue
index b79d9a84a..3818f8c16 100644
--- a/src/pages/reviewerSubmission/RoundHistoryModal.vue
+++ b/src/pages/reviewerSubmission/RoundHistoryModal.vue
@@ -81,7 +81,11 @@
 				</div>
 				<div v-if="store.reviewRoundHistory.publicationKeywords" class="mt-4">
 					<div class="text-lg-bold">{{ t('reviewer.submission.reviewRound.metadata.keywords') }}:</div>
-					<div class="text-base-normal mt-1">{{ localize(store.reviewRoundHistory.publicationKeywords).join(', ') }}</div>
+					<div class="text-base-normal mt-1">
+						<template v-for="(keyword, index) in localize(store.reviewRoundHistory.publicationKeywords)">
+							<template v-if="index > 0">, </template><span>{{ keyword }}</span>
+						</template>
+					</div>
 				</div>
 			</template>
 			<template v-if="store.reviewRoundHistory.reviewAssignment" #right2>

From cf4253c36faf84bc1520fb0f86edbff692c75e7a Mon Sep 17 00:00:00 2001
From: Nicolas Boulay <nibou230@ulaval.ca>
Date: Tue, 20 Feb 2024 11:23:48 -0500
Subject: [PATCH 10/13] pkp/pkp-lib#9453 Better data for review history mocks

---
 .../ReviewerSubmissionPage.stories.js         | 22 ++++-
 src/pages/reviewerSubmission/mocks/review1.js | 99 +++++++++++++++++--
 src/pages/reviewerSubmission/mocks/review2.js | 43 +++++---
 3 files changed, 143 insertions(+), 21 deletions(-)

diff --git a/src/pages/reviewerSubmission/ReviewerSubmissionPage.stories.js b/src/pages/reviewerSubmission/ReviewerSubmissionPage.stories.js
index 61b3e6457..d5704748a 100644
--- a/src/pages/reviewerSubmission/ReviewerSubmissionPage.stories.js
+++ b/src/pages/reviewerSubmission/ReviewerSubmissionPage.stories.js
@@ -55,7 +55,22 @@ export default {
 
 export const Base = {};
 
-export const OpenModal = {
+export const OpenModalAccepted = {
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(canvas.getByText('Read Round 1 Review'));
+	},
+	decorators: [
+		() => ({
+			template: '<div style="height: 700px"><story/></div>',
+		}),
+	],
+};
+
+export const OpenModalDeclined = {
 	play: async ({canvasElement}) => {
 		// Assigns canvas to the component root element
 		const canvas = within(canvasElement);
@@ -63,4 +78,9 @@ export const OpenModal = {
 
 		await user.click(canvas.getByText('Read Round 2 Review'));
 	},
+	decorators: [
+		() => ({
+			template: '<div style="height: 700px"><story/></div>',
+		}),
+	],
 };
diff --git a/src/pages/reviewerSubmission/mocks/review1.js b/src/pages/reviewerSubmission/mocks/review1.js
index 59cc37b93..3631b88a1 100644
--- a/src/pages/reviewerSubmission/mocks/review1.js
+++ b/src/pages/reviewerSubmission/mocks/review1.js
@@ -1,10 +1,26 @@
 export default {
-	publicationTitle:
-		'Influence of long-term nutrition with different dietary fats on fatty acid composition of heavy pigs backfat',
-	publicationType: 'Articles',
-	publicationAbstract:
-		'Aim of this research is to provide a general situation of cattle slaughtered in Cameroon, as a representative example for the Central African Sub-region. The quality and safety of beef from the abattoir of Yaound\u00e9, the largest in Cameroon, were considered. From January 2009 to March 2012, the pre-slaughter conditions and characteristics of 1953 cattle carcasses were recorded, as well as the pH of m. longissimus thoracis 24 h after slaughter. From these carcasses, 60 were selected to represent the bulls slaughtered. The quality parameters and composition of m. longissimus thoracis were carried out. The origin of most of the cattle was the Guinea High Savannah (74.6%), and transhumance was the common production system (75.5%). Gudali (45.6%), White Fulani (33.3%) and Red Mbororo (20.3%) breeds were predominant. Carcass weight was affected by rearing system and cattle category, and it markedly varied during year. Considering meat quality, the fat content was low (1.2%) and similar between breeds, moreover Gudali showed the toughest meat. Of the cows slaughtered, 27% were pregnant and the most common abnormal conditions encountered were ectoparasites, fatigue, lameness, fungal-like skin lesions, enlarged lymph nodes, respiratory distress, nodular lesions. More than 20% of the carcasses had some organs condemned, mainly for liver flukes (5.17%), and 1.0% of them were completely condemned due to tuberculosis, that also affected 3.28% of lungs. These data could aid authorities draw up programmes with the aim to strengthen cattle production, improve beef supply, control and prevent the observed diseases, and promote the regional trade.',
-	publicationKeywords: 'cattle, food security',
+	publicationTitle: {
+		en: 'Influence of long-term nutrition with different dietary fats on fatty acid composition of heavy pigs backfat',
+		fr_CA: 'Influence d\'une alimentation à long terme avec différentes graisses alimentaires sur la composition en acides gras du lard des porcs lourds',
+	},
+	publicationType: {
+		en: 'Articles',
+		fr_CA: 'Articles',
+	},
+	publicationAbstract: {
+		en: 'Aim of this research is to provide a general situation of cattle slaughtered in Cameroon, as a representative example for the Central African Sub-region. The quality and safety of beef from the abattoir of Yaound\u00e9, the largest in Cameroon, were considered. From January 2009 to March 2012, the pre-slaughter conditions and characteristics of 1953 cattle carcasses were recorded, as well as the pH of m. longissimus thoracis 24 h after slaughter. From these carcasses, 60 were selected to represent the bulls slaughtered. The quality parameters and composition of m. longissimus thoracis were carried out. The origin of most of the cattle was the Guinea High Savannah (74.6%), and transhumance was the common production system (75.5%). Gudali (45.6%), White Fulani (33.3%) and Red Mbororo (20.3%) breeds were predominant. Carcass weight was affected by rearing system and cattle category, and it markedly varied during year. Considering meat quality, the fat content was low (1.2%) and similar between breeds, moreover Gudali showed the toughest meat. Of the cows slaughtered, 27% were pregnant and the most common abnormal conditions encountered were ectoparasites, fatigue, lameness, fungal-like skin lesions, enlarged lymph nodes, respiratory distress, nodular lesions. More than 20% of the carcasses had some organs condemned, mainly for liver flukes (5.17%), and 1.0% of them were completely condemned due to tuberculosis, that also affected 3.28% of lungs. These data could aid authorities draw up programmes with the aim to strengthen cattle production, improve beef supply, control and prevent the observed diseases, and promote the regional trade.',
+		fr_CA: 'Le but de cette recherche est de fournir une situation générale des bovins abattus au Cameroun, à titre d\'exemple représentatif de la sous-région de l\'Afrique Centrale. La qualité et la sécurité sanitaire de la viande bovine issue de l\'abattoir de Yaoundé9, le plus grand du Cameroun, ont été étudiées. De janvier 2009 à mars 2012, les conditions et caractéristiques avant l\'abattage de 1953 carcasses de bovins ont été enregistrées, ainsi que le pH de m. longissimus thoracis 24 h après l\'abattage. Parmi ces carcasses, 60 ont été sélectionnées pour représenter les taureaux abattus. Les paramètres de qualité et la composition de m. longissimus thoracis ont été réalisés. L\'origine de la plupart des bovins était la haute savane guinéenne (74,6%), et la transhumance était le système de production commun (75,5%). Les races Gudali (45,6%), Peuls Blancs (33,3%) et Mbororo Rouge (20,3%) étaient prédominantes. Le poids des carcasses était affecté par le système d\'élevage et la catégorie de bovins, et variait considérablement au cours de l\'année. Concernant la qualité de la viande, la teneur en graisse était faible (1,2%) et similaire entre les races, de plus Gudali présentait la viande la plus dure. Parmi les vaches abattues, 27 % étaient gestantes et les conditions anormales les plus fréquemment rencontrées étaient les ectoparasites, la fatigue, la boiterie, les lésions cutanées de type fongique, l\'hypertrophie des ganglions lymphatiques, la détresse respiratoire, les lésions nodulaires. Plus de 20% des carcasses présentaient certains organes condamnés, principalement pour des douves du foie (5,17%), et 1,0% d\'entre elles ont été complètement condamnées à cause de la tuberculose, qui a également touché 3,28% des poumons. Ces données pourraient aider les autorités à élaborer des programmes visant à renforcer la production bovine, à améliorer l\'approvisionnement en viande bovine, à contrôler et prévenir les maladies observées et à promouvoir le commerce régional.',
+	},
+	publicationKeywords: {
+		en: [
+			'cattle',
+			'food security',
+		],
+		fr_CA: [
+			'bétail',
+			'sécurité alimentaire',
+		],
+	},
 	declineEmail: null,
 	reviewAssignment: {
 		_href:
@@ -43,7 +59,9 @@ export default {
 	comments: [
 		'<p>This is my <strong>feedback</strong> for author and editor.</p>',
 	],
-	privateComments: ['<p>This is my <strong>feedback</strong> for editor.</p>'],
+	privateComments: [
+		'<p>This is my <strong>feedback</strong> for editor.</p>',
+	],
 	attachments: [
 		{
 			_href:
@@ -107,5 +125,70 @@ export default {
 			viewable: null,
 		},
 	],
-	files: [],
+	files: [
+		{
+			_href:
+				'http://localhost:7002/index.php/publicknowledge/api/v1/submissions/16/files/41',
+			assocId: 1,
+			assocType: 521,
+			caption: null,
+			copyrightOwner: null,
+			createdAt: '2024-02-07 14:19:31',
+			creator: {
+				en: '',
+				fr_CA: '',
+			},
+			credit: null,
+			dateCreated: null,
+			dependentFiles: [],
+			description: {
+				en: '',
+				fr_CA: '',
+			},
+			documentType: 'pdf',
+			fileId: 37,
+			fileStage: 10,
+			genreId: 1,
+			genreIsDependent: false,
+			genreIsSupplementary: false,
+			genreName: {
+				en: 'Article Text',
+				fr_CA: "Texte de l'article",
+			},
+			id: 41,
+			language: null,
+			locale: 'en',
+			mimetype: 'application/pdf',
+			name: {
+				en: 'article.pdf',
+				fr_CA: '',
+			},
+			path: 'journals/1/articles/16/653fbb73c2ac5.pdf',
+			publisher: {
+				en: '',
+				fr_CA: '',
+			},
+			revisions: [],
+			source: {
+				en: '',
+				fr_CA: '',
+			},
+			sourceSubmissionFileId: null,
+			sponsor: {
+				en: '',
+				fr_CA: '',
+			},
+			subject: {
+				en: '',
+				fr_CA: '',
+			},
+			submissionId: 16,
+			terms: null,
+			updatedAt: '2024-02-07 14:20:23',
+			uploaderUserId: 1,
+			uploaderUserName: 'admin',
+			url: 'http://localhost:7002/index.php/publicknowledge/$$$call$$$/api/file/file-api/download-file?submissionFileId=41&submissionId=16&stageId=1',
+			viewable: null,
+		},
+	],
 };
diff --git a/src/pages/reviewerSubmission/mocks/review2.js b/src/pages/reviewerSubmission/mocks/review2.js
index f46872064..ba2beb5dc 100644
--- a/src/pages/reviewerSubmission/mocks/review2.js
+++ b/src/pages/reviewerSubmission/mocks/review2.js
@@ -1,11 +1,30 @@
 export default {
-	publicationTitle:
-		'Influence of long-term nutrition with different dietary fats on fatty acid composition of heavy pigs backfat',
-	publicationType: 'Articles',
-	publicationAbstract:
-		'Aim of this research is to provide a general situation of cattle slaughtered in Cameroon, as a representative example for the Central African Sub-region. The quality and safety of beef from the abattoir of Yaound\u00e9, the largest in Cameroon, were considered. From January 2009 to March 2012, the pre-slaughter conditions and characteristics of 1953 cattle carcasses were recorded, as well as the pH of m. longissimus thoracis 24 h after slaughter. From these carcasses, 60 were selected to represent the bulls slaughtered. The quality parameters and composition of m. longissimus thoracis were carried out. The origin of most of the cattle was the Guinea High Savannah (74.6%), and transhumance was the common production system (75.5%). Gudali (45.6%), White Fulani (33.3%) and Red Mbororo (20.3%) breeds were predominant. Carcass weight was affected by rearing system and cattle category, and it markedly varied during year. Considering meat quality, the fat content was low (1.2%) and similar between breeds, moreover Gudali showed the toughest meat. Of the cows slaughtered, 27% were pregnant and the most common abnormal conditions encountered were ectoparasites, fatigue, lameness, fungal-like skin lesions, enlarged lymph nodes, respiratory distress, nodular lesions. More than 20% of the carcasses had some organs condemned, mainly for liver flukes (5.17%), and 1.0% of them were completely condemned due to tuberculosis, that also affected 3.28% of lungs. These data could aid authorities draw up programmes with the aim to strengthen cattle production, improve beef supply, control and prevent the observed diseases, and promote the regional trade.',
-	publicationKeywords: 'cattle, food security',
-	declineEmail: null,
+	publicationTitle: {
+		en: 'Influence of long-term nutrition with different dietary fats on fatty acid composition of heavy pigs backfat',
+		fr_CA: 'Influence d\'une alimentation à long terme avec différentes graisses alimentaires sur la composition en acides gras du lard des porcs lourds',
+	},
+	publicationType: {
+		en: 'Articles',
+		fr_CA: 'Articles',
+	},
+	publicationAbstract: {
+		en: 'Aim of this research is to provide a general situation of cattle slaughtered in Cameroon, as a representative example for the Central African Sub-region. The quality and safety of beef from the abattoir of Yaound\u00e9, the largest in Cameroon, were considered. From January 2009 to March 2012, the pre-slaughter conditions and characteristics of 1953 cattle carcasses were recorded, as well as the pH of m. longissimus thoracis 24 h after slaughter. From these carcasses, 60 were selected to represent the bulls slaughtered. The quality parameters and composition of m. longissimus thoracis were carried out. The origin of most of the cattle was the Guinea High Savannah (74.6%), and transhumance was the common production system (75.5%). Gudali (45.6%), White Fulani (33.3%) and Red Mbororo (20.3%) breeds were predominant. Carcass weight was affected by rearing system and cattle category, and it markedly varied during year. Considering meat quality, the fat content was low (1.2%) and similar between breeds, moreover Gudali showed the toughest meat. Of the cows slaughtered, 27% were pregnant and the most common abnormal conditions encountered were ectoparasites, fatigue, lameness, fungal-like skin lesions, enlarged lymph nodes, respiratory distress, nodular lesions. More than 20% of the carcasses had some organs condemned, mainly for liver flukes (5.17%), and 1.0% of them were completely condemned due to tuberculosis, that also affected 3.28% of lungs. These data could aid authorities draw up programmes with the aim to strengthen cattle production, improve beef supply, control and prevent the observed diseases, and promote the regional trade.',
+		fr_CA: 'Le but de cette recherche est de fournir une situation générale des bovins abattus au Cameroun, à titre d\'exemple représentatif de la sous-région de l\'Afrique Centrale. La qualité et la sécurité sanitaire de la viande bovine issue de l\'abattoir de Yaoundé9, le plus grand du Cameroun, ont été étudiées. De janvier 2009 à mars 2012, les conditions et caractéristiques avant l\'abattage de 1953 carcasses de bovins ont été enregistrées, ainsi que le pH de m. longissimus thoracis 24 h après l\'abattage. Parmi ces carcasses, 60 ont été sélectionnées pour représenter les taureaux abattus. Les paramètres de qualité et la composition de m. longissimus thoracis ont été réalisés. L\'origine de la plupart des bovins était la haute savane guinéenne (74,6%), et la transhumance était le système de production commun (75,5%). Les races Gudali (45,6%), Peuls Blancs (33,3%) et Mbororo Rouge (20,3%) étaient prédominantes. Le poids des carcasses était affecté par le système d\'élevage et la catégorie de bovins, et variait considérablement au cours de l\'année. Concernant la qualité de la viande, la teneur en graisse était faible (1,2%) et similaire entre les races, de plus Gudali présentait la viande la plus dure. Parmi les vaches abattues, 27 % étaient gestantes et les conditions anormales les plus fréquemment rencontrées étaient les ectoparasites, la fatigue, la boiterie, les lésions cutanées de type fongique, l\'hypertrophie des ganglions lymphatiques, la détresse respiratoire, les lésions nodulaires. Plus de 20% des carcasses présentaient certains organes condamnés, principalement pour des douves du foie (5,17%), et 1,0% d\'entre elles ont été complètement condamnées à cause de la tuberculose, qui a également touché 3,28% des poumons. Ces données pourraient aider les autorités à élaborer des programmes visant à renforcer la production bovine, à améliorer l\'approvisionnement en viande bovine, à contrôler et prévenir les maladies observées et à promouvoir le commerce régional.',
+	},
+	publicationKeywords: {
+		en: [
+			'cattle',
+			'food security',
+		],
+		fr_CA: [
+			'bétail',
+			'sécurité alimentaire',
+		],
+	},
+	declineEmail: {
+		subject: '<p>This is the <strong>subject</strong> of my email</p>',
+		body: '<p>Editors:<br><br>I am afraid that at this time I am unable to review the submission, "<strong>Influence of long-term nutrition with different dietary fats on fatty acid composition of heavy pigs backfat</strong>" for Le partage. Thank you for thinking of me, and another time feel free to call on me.<br><br>Paul</p>',
+	},
 	reviewAssignment: {
 		_href:
 			'http://localhost:7002/index.php/_/api/v1/_submissions/reviewAssignments/30',
@@ -15,14 +34,14 @@ export default {
 		considered: null,
 		dateAcknowledged: null,
 		dateAssigned: '2024-02-08 12:47:38',
-		dateCompleted: '2024-02-08 12:51:12',
+		dateCompleted: null,
 		dateConfirmed: '2024-02-08 12:48:22',
 		dateDue: '2024-03-07 00:00:00',
 		dateNotified: '2024-02-08 12:47:40',
 		dateRated: null,
 		dateReminded: null,
 		dateResponseDue: '2024-03-07 00:00:00',
-		declined: false,
+		declined: true,
 		id: 30,
 		lastModified: '2024-02-08 12:51:12',
 		quality: null,
@@ -39,9 +58,9 @@ export default {
 		step: 4,
 		submissionId: 16,
 	},
-	recommendation: 'Accept Submission',
-	comments: ['<p>For author and editor 2</p>'],
-	privateComments: ['<p>For editor 2</p>'],
+	recommendation: null,
+	comments: [],
+	privateComments: [],
 	attachments: [],
 	files: [],
 };

From 1313fb8209371dbeefd64203e03c5c0fc2e50a6b Mon Sep 17 00:00:00 2001
From: Nicolas Boulay <nibou230@ulaval.ca>
Date: Tue, 20 Feb 2024 11:54:33 -0500
Subject: [PATCH 11/13] pkp/pkp-lib#9453 Fix typo

---
 src/pages/reviewerSubmission/mocks/review2.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/reviewerSubmission/mocks/review2.js b/src/pages/reviewerSubmission/mocks/review2.js
index ba2beb5dc..dad56a655 100644
--- a/src/pages/reviewerSubmission/mocks/review2.js
+++ b/src/pages/reviewerSubmission/mocks/review2.js
@@ -23,7 +23,7 @@ export default {
 	},
 	declineEmail: {
 		subject: '<p>This is the <strong>subject</strong> of my email</p>',
-		body: '<p>Editors:<br><br>I am afraid that at this time I am unable to review the submission, "<strong>Influence of long-term nutrition with different dietary fats on fatty acid composition of heavy pigs backfat</strong>" for Le partage. Thank you for thinking of me, and another time feel free to call on me.<br><br>Paul</p>',
+		body: '<p>Editors:<br><br>I am afraid that at this time I am unable to review the submission, "<strong>Influence of long-term nutrition with different dietary fats on fatty acid composition of heavy pigs backfat</strong>". Thank you for thinking of me, and another time feel free to call on me.<br><br>Paul</p>',
 	},
 	reviewAssignment: {
 		_href:

From 67c81f61e99b8dae34f017a185f50ca3d256db52 Mon Sep 17 00:00:00 2001
From: Nicolas Boulay <nibou230@ulaval.ca>
Date: Wed, 21 Feb 2024 11:19:19 -0500
Subject: [PATCH 12/13] pkp/pkp-lib#9453 Adjust the viewport height for
 storybook

---
 .../reviewerSubmission/ReviewerSubmissionPage.stories.js      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/reviewerSubmission/ReviewerSubmissionPage.stories.js b/src/pages/reviewerSubmission/ReviewerSubmissionPage.stories.js
index d5704748a..1a1837d11 100644
--- a/src/pages/reviewerSubmission/ReviewerSubmissionPage.stories.js
+++ b/src/pages/reviewerSubmission/ReviewerSubmissionPage.stories.js
@@ -65,7 +65,7 @@ export const OpenModalAccepted = {
 	},
 	decorators: [
 		() => ({
-			template: '<div style="height: 700px"><story/></div>',
+			template: '<div style="height: 1200px"><story/></div>',
 		}),
 	],
 };
@@ -80,7 +80,7 @@ export const OpenModalDeclined = {
 	},
 	decorators: [
 		() => ({
-			template: '<div style="height: 700px"><story/></div>',
+			template: '<div style="height: 1200px"><story/></div>',
 		}),
 	],
 };

From ec59e777ce407781b5e8c7d1b622fd0f43c72cbf Mon Sep 17 00:00:00 2001
From: Nicolas Boulay <nibou230@ulaval.ca>
Date: Fri, 15 Mar 2024 14:29:37 -0400
Subject: [PATCH 13/13] pkp/pkp-lib#9453 Minor UI ajustements asked by Devika

---
 .../listingFiles/ListingFilesListPanel.vue    |  6 ++++
 .../ReviewerSubmissionPage.vue                |  4 +--
 .../reviewerSubmission/RoundHistoryModal.vue  | 36 +++++++++----------
 3 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/components/ListPanel/listingFiles/ListingFilesListPanel.vue b/src/components/ListPanel/listingFiles/ListingFilesListPanel.vue
index 2affc4fb6..0a4e25d4c 100644
--- a/src/components/ListPanel/listingFiles/ListingFilesListPanel.vue
+++ b/src/components/ListPanel/listingFiles/ListingFilesListPanel.vue
@@ -1,5 +1,11 @@
 <template>
 	<ListPanel :title="title" :description="description" :items="files">
+		<template #header>
+			<h2 class="pkpHeader__title">
+				<span class="text-dark-accent">{{ title }}</span>
+			</h2>
+			<div v-if="description">{{ description }}</div>
+		</template>
 		<template #item="{item}">
 			<div class="flex items-center">
 				<div class="me-2 flex-grow truncate">
diff --git a/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue b/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
index 17b6b41ec..73881b423 100644
--- a/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
+++ b/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="bg-lightest border border-light p-8 mb-4">
-		<h2>{{ t('reviewer.submission.reviewRound.info') }}</h2>
+	<div class="bg-lightest border border-light text-dark p-8 mb-4">
+		<h2 class="text-dark-accent">{{ t('reviewer.submission.reviewRound.info') }}</h2>
 		<p
 			v-for="review in store.reviewRoundHistories"
 			:key="review.reviewRoundId"
diff --git a/src/pages/reviewerSubmission/RoundHistoryModal.vue b/src/pages/reviewerSubmission/RoundHistoryModal.vue
index 3818f8c16..79e612960 100644
--- a/src/pages/reviewerSubmission/RoundHistoryModal.vue
+++ b/src/pages/reviewerSubmission/RoundHistoryModal.vue
@@ -1,10 +1,10 @@
 <template>
-	<SideModalBody v-if="store.reviewRoundHistory">
+	<SideModalBody v-if="store.reviewRoundHistory" class="text-dark">
 		<template v-if="store.reviewRoundHistory.reviewAssignment" #pre-title>
 			{{ store.reviewRoundHistory.reviewAssignment.submissionId }}
 		</template>
 		<template #title>
-			<h1 class="underline">
+			<h1 class="underline text-dark-accent">
 				{{ t('reviewer.submission.reviewRound.info.modal.title', {round: store.reviewRoundNumber}) }}
 			</h1>
 		</template>
@@ -15,12 +15,12 @@
 			<template #left>
 				<div v-if="store.reviewRoundHistory.reviewAssignment.declined">
 					<div class="border border-light p-4 mb-4">
-						<h2 class="text-2xl-bold mb-4">{{ t('reviewer.submission.reviewRound.reviewDeclineDate') }}</h2>
+						<h2 class="text-2xl-bold mb-4 text-dark-accent">{{ t('reviewer.submission.reviewRound.reviewDeclineDate') }}</h2>
 						<p>{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateConfirmed) }}</p>
 					</div>
 
 					<div v-if="store.reviewRoundHistory.declineEmail" class="border border-light p-4">
-						<h2 class="text-2xl-bold mb-4">{{ t('reviewer.submission.reviewRound.emailLog') }}</h2>
+						<h2 class="text-2xl-bold text-dark-accent mb-4">{{ t('reviewer.submission.reviewRound.emailLog') }}</h2>
 						<p v-html="store.reviewRoundHistory.declineEmail.subject" class="font-bold mb-4"></p>
 						<hr class="opacity-50">
 						<p v-html="store.reviewRoundHistory.declineEmail.body" class="mt-4"></p>
@@ -29,13 +29,13 @@
 				</div>
 				<div v-else>
 					<div v-if="store.reviewRoundHistory.recommendation" class="border border-light p-4 mb-4">
-						<h2 class="text-2xl-bold mb-4">{{ t('reviewer.article.recommendation') }}</h2>
+						<h2 class="text-2xl-bold text-dark-accent mb-4">{{ t('reviewer.article.recommendation') }}</h2>
 						<p>{{ store.reviewRoundHistory.recommendation }}</p>
 					</div>
 
 					<div v-if="store.reviewRoundHistory.comments.length || store.reviewRoundHistory.privateComments.length" class="border border-light mb-4">
 						<div class="border-b border-light p-4">
-							<h2 class="text-2xl-bold">{{ t('reviewer.submission.reviewRound.comments') }}</h2>
+							<h2 class="text-2xl-bold text-dark-accent">{{ t('reviewer.submission.reviewRound.comments') }}</h2>
 						</div>
 						<div v-if="store.reviewRoundHistory.comments.length" class="border-b border-light p-4">
 							<h2 class="text-xl-bold text-light mb-4">{{ t('reviewer.submission.reviewRound.comments.authorAndEditor') }}</h2>
@@ -70,17 +70,17 @@
 				</div>
 			</template>
 			<template #right1>
-				<div class="text-xl-bold">{{ t('reviewer.submission.reviewRound.metadata') }}</div>
+				<div class="text-xl-bold text-dark-accent">{{ t('reviewer.submission.reviewRound.metadata') }}</div>
 				<div v-if="store.reviewRoundHistory.publicationType" class="mt-4">
-					<div class="text-lg-bold">{{ t('reviewer.submission.reviewRound.metadata.type') }}:</div>
+					<div class="text-lg-bold text-dark-accent">{{ t('reviewer.submission.reviewRound.metadata.type') }}:</div>
 					<div class="text-base-normal mt-1">{{ localize(store.reviewRoundHistory.publicationType) }}</div>
 				</div>
 				<div v-if="store.reviewRoundHistory.publicationAbstract" class="mt-4">
-					<div class="text-lg-bold">{{ t('reviewer.submission.reviewRound.metadata.abstract') }}:</div>
-					<div v-html="localize(store.reviewRoundHistory.publicationAbstract)" class="text-base-normal mt-1"></div>
+					<div class="text-lg-bold text-dark-accent">{{ t('reviewer.submission.reviewRound.metadata.abstract') }}:</div>
+					<div class="text-base-normal mt-1" v-html="localize(store.reviewRoundHistory.publicationAbstract)"></div>
 				</div>
 				<div v-if="store.reviewRoundHistory.publicationKeywords" class="mt-4">
-					<div class="text-lg-bold">{{ t('reviewer.submission.reviewRound.metadata.keywords') }}:</div>
+					<div class="text-lg-bold text-dark-accent">{{ t('reviewer.submission.reviewRound.metadata.keywords') }}:</div>
 					<div class="text-base-normal mt-1">
 						<template v-for="(keyword, index) in localize(store.reviewRoundHistory.publicationKeywords)">
 							<template v-if="index > 0">, </template><span>{{ keyword }}</span>
@@ -89,27 +89,25 @@
 				</div>
 			</template>
 			<template v-if="store.reviewRoundHistory.reviewAssignment" #right2>
-				<div class="text-xl-bold">
-					{{ t('reviewer.submission.reviewRound.general') }}
-				</div>
+				<div class="text-xl-bold text-dark-accent">{{ t('reviewer.submission.reviewRound.general') }}</div>
 				<div v-if="store.reviewRoundHistory.reviewAssignment.dateNotified" class="mt-4">
-					<div class="text-lg-bold">{{ t('reviewer.submission.reviewRequestDate') }}:</div>
+					<div class="text-lg-bold text-dark-accent">{{ t('reviewer.submission.reviewRequestDate') }}:</div>
 					<div class="text-base-normal mt-1">{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateNotified) }}</div>
 				</div>
 				<div v-if="store.reviewRoundHistory.reviewAssignment.dateResponseDue" class="mt-4">
-					<div class="text-lg-bold">{{ t('reviewer.submission.responseDueDate') }}:</div>
+					<div class="text-lg-bold text-dark-accent">{{ t('reviewer.submission.responseDueDate') }}:</div>
 					<div class="text-base-normal mt-1">{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateResponseDue) }}</div>
 				</div>
 				<div v-if="store.reviewRoundHistory.reviewAssignment.dateConfirmed" class="mt-4">
-					<div class="text-lg-bold">{{ t('reviewer.submission.acceptedOn') }}:</div>
+					<div class="text-lg-bold text-dark-accent">{{ t('reviewer.submission.acceptedOn') }}:</div>
 					<div class="text-base-normal mt-1">{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateConfirmed) }}</div>
 				</div>
 				<div v-if="store.reviewRoundHistory.reviewAssignment.dateDue" class="mt-4">
-					<div class="text-lg-bold">{{ t('reviewer.submission.reviewDueDate') }}:</div>
+					<div class="text-lg-bold text-dark-accent">{{ t('reviewer.submission.reviewDueDate') }}:</div>
 					<div class="text-base-normal mt-1">{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateDue) }}</div>
 				</div>
 				<div v-if="store.reviewRoundHistory.reviewAssignment.dateCompleted" class="mt-4">
-					<div class="text-lg-bold">{{ t('reviewer.submission.submittedOn') }}:</div>
+					<div class="text-lg-bold text-dark-accent">{{ t('reviewer.submission.submittedOn') }}:</div>
 					<div class="text-base-normal mt-1">{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateCompleted) }}</div>
 				</div>
 			</template>