diff --git a/src/components/views/project/projectDonations/QfRoundSelector.tsx b/src/components/views/project/projectDonations/QfRoundSelector.tsx index 9f6feba4ea..d054362576 100644 --- a/src/components/views/project/projectDonations/QfRoundSelector.tsx +++ b/src/components/views/project/projectDonations/QfRoundSelector.tsx @@ -37,9 +37,21 @@ export const QfRoundSelector: FC = ({ const navigationNextRef = useRef(null); const sortedRounds = - projectData?.qfRounds?.sort( - (a, b) => Number(b.isActive) - Number(a.isActive), - ) || []; + projectData?.qfRounds?.sort((a, b) => { + // First, compare by isActive + const isActiveComparison = Number(b.isActive) - Number(a.isActive); + + // If isActive values are the same, compare by beginDate (most recent first) + if (isActiveComparison === 0) { + return ( + new Date(b.beginDate).getTime() - + new Date(a.beginDate).getTime() + ); + } + + // Otherwise, return the comparison result of isActive + return isActiveComparison; + }) || []; const isRecurringSelected = projectDonationSwiperState.isRecurringSelected; const selectedQF = projectDonationSwiperState.selectedQF; @@ -103,11 +115,18 @@ export const QfRoundSelector: FC = ({ }} $isSelected={isRecurringSelected === true} > - {(projectDonationSwiperState.selectedQF === null) === - null ? ( - Recurring Donations + {projectDonationSwiperState.selectedQF === null ? ( + + {formatMessage({ + id: 'label.recurring_donation', + })} + ) : ( -

Recurring Donations

+

+ {formatMessage({ + id: 'label.recurring_donation', + })} +

)}