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

pkp/pkp-lib#9453 Connect the new API for the round history

pkp/pkp-lib#9453 Use the localized recommandation value

pkp/pkp-lib#9453 Show review comments as HTML

pkp/pkp-lib#9453 Refactor the round history UI to follow the proper design

pkp/pkp-lib#9453 Fix the download URL for file component

pkp/pkp-lib#9453 Adding ReviewerSubmissionPage to storybook

pkp/pkp-lib#9453 Use tailwind instead of panels and localize data from the api

pkp/pkp-lib#9453 Fix for chromatic

pkp/pkp-lib#9453 Better data for review history mocks

pkp/pkp-lib#9453 Fix typo

pkp/pkp-lib#9453 Adjust the viewport height for storybook

pkp/pkp-lib#9453 Minor UI ajustements asked by Devika
---
 public/globals.js                             |  40 +++-
 src/components/File/File.vue                  |   3 +-
 .../listingFiles/ListingFilesListPanel.vue    |   6 +
 .../ReviewerSubmissionPage.mdx                |  13 ++
 .../ReviewerSubmissionPage.stories.js         |  86 ++++++++
 .../ReviewerSubmissionPage.vue                |  30 ++-
 .../reviewerSubmission/RoundHistoryModal.vue  | 133 ++++++++++--
 src/pages/reviewerSubmission/mocks/review1.js | 194 ++++++++++++++++++
 src/pages/reviewerSubmission/mocks/review2.js |  66 ++++++
 .../reviewerSubmissionPageStore.js            |   4 +-
 .../roundHistoryModalStore.js                 |  14 +-
 11 files changed, 551 insertions(+), 38 deletions(-)
 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 4d8e0c5b7..e6bc0f77b 100644
--- a/public/globals.js
+++ b/public/globals.js
@@ -28,7 +28,6 @@ window.pkp = {
 		apiBaseUrl: 'https://mock/index.php/publicknowledge/api/v1/',
 		pageBaseUrl: 'https://mock/index.php/publicknowledge/',
 	},
-
 	/**
 	 * Dummy constants required by components
 	 */
@@ -262,6 +261,7 @@ window.pkp = {
 		'manager.dois.update.partialFailure': 'Some DOI(s) could not be updated',
 		'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',
@@ -273,12 +273,38 @@ window.pkp = {
 		'publication.status.published': 'Published',
 		'publication.status.unpublished': 'Unpublished',
 		'publication.version': 'Version {$version}',
-		'reviewer.article.decision.accept': 'Accept Submission',
-		'reviewer.article.decision.decline': 'Decline Submission',
-		'reviewer.article.decision.pendingRevisions': 'Revisions Required',
-		'reviewer.article.decision.resubmitElsewhere': 'Resubmit Elsewhere',
-		'reviewer.article.decision.resubmitHere': 'Resubmit for Review',
-		'reviewer.article.decision.seeComments': 'See Comments',
+		'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',
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,
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.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..1a1837d11
--- /dev/null
+++ b/src/pages/reviewerSubmission/ReviewerSubmissionPage.stories.js
@@ -0,0 +1,86 @@
+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 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: 1200px"><story/></div>',
+		}),
+	],
+};
+
+export const OpenModalDeclined = {
+	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'));
+	},
+	decorators: [
+		() => ({
+			template: '<div style="height: 1200px"><story/></div>',
+		}),
+	],
+};
diff --git a/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue b/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
index 6b2c35623..73881b423 100644
--- a/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
+++ b/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue
@@ -1,12 +1,24 @@
 <template>
-	<div class="mb-4 space-x-2">
-		<PkpButton
+	<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"
-			@click="store.openRoundHistoryModal(review)"
 		>
-			{{ t('submission.round', {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="ms-4"
+				@click="store.openRoundHistoryModal(review)"
+			>
+				{{ t('reviewer.submission.reviewRound.info.read', {round: review.reviewRoundNumber}) }}
+			</PkpButton>
+		</p>
 	</div>
 	<SideModal
 		:open="store.isRoundHistoryModalOpened"
@@ -20,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 642aeabc1..79e612960 100644
--- a/src/pages/reviewerSubmission/RoundHistoryModal.vue
+++ b/src/pages/reviewerSubmission/RoundHistoryModal.vue
@@ -1,33 +1,140 @@
 <template>
-	<SideModalBody>
-		<template #title>Title TODO</template>
-		<div class="p-4">
-			<div class="bg-secondary p-5">
-				Here goes all metadata, submissionId: {{ store.submissionId }}, roundId:
-				{{ store.reviewRoundId }}
-
-				<div v-if="store.submission">
-					<div class="text-xl-bold">
-						{{ localize(store.submission.publications[0].title) }}
+	<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 text-dark-accent">
+				{{ t('reviewer.submission.reviewRound.info.modal.title', {round: store.reviewRoundNumber}) }}
+			</h1>
+		</template>
+		<template v-if="store.reviewRoundHistory.publicationTitle" #description>
+			{{ localize(store.reviewRoundHistory.publicationTitle) }}
+		</template>
+		<SideModalLayout2Columns>
+			<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 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 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>
+					</div>
+					<p v-else>{{ t('reviewer.submission.reviewRound.emailLog.defaultMessage') }}</p>
+				</div>
+				<div v-else>
+					<div v-if="store.reviewRoundHistory.recommendation" class="border border-light p-4 mb-4">
+						<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 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>
+							<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>
+
+					<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 text-dark-accent">{{ t('reviewer.submission.reviewRound.metadata') }}</div>
+				<div v-if="store.reviewRoundHistory.publicationType" class="mt-4">
+					<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>
-		</div>
+				<div v-if="store.reviewRoundHistory.publicationAbstract" class="mt-4">
+					<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 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>
+						</template>
+					</div>
+				</div>
+			</template>
+			<template v-if="store.reviewRoundHistory.reviewAssignment" #right2>
+				<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 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 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 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 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 text-dark-accent">{{ t('reviewer.submission.submittedOn') }}:</div>
+					<div class="text-base-normal mt-1">{{ formatShortDate(store.reviewRoundHistory.reviewAssignment.dateCompleted) }}</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';
+
+function formatShortDate(dateString) {
+	return moment(dateString).format('DD-MM-YYYY');
+}
 
 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/mocks/review1.js b/src/pages/reviewerSubmission/mocks/review1.js
new file mode 100644
index 000000000..3631b88a1
--- /dev/null
+++ b/src/pages/reviewerSubmission/mocks/review1.js
@@ -0,0 +1,194 @@
+export default {
+	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:
+			'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: [
+		{
+			_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
new file mode 100644
index 000000000..dad56a655
--- /dev/null
+++ b/src/pages/reviewerSubmission/mocks/review2.js
@@ -0,0 +1,66 @@
+export default {
+	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>". 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',
+		cancelled: false,
+		comments: null,
+		competingInterests: null,
+		considered: null,
+		dateAcknowledged: null,
+		dateAssigned: '2024-02-08 12:47:38',
+		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: true,
+		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: null,
+	comments: [],
+	privateComments: [],
+	attachments: [],
+	files: [],
+};
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..29fa14d6e 100644
--- a/src/pages/reviewerSubmission/roundHistoryModalStore.js
+++ b/src/pages/reviewerSubmission/roundHistoryModalStore.js
@@ -6,18 +6,20 @@ 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,
 		};
 	},
 );