diff --git a/components/Fund/FundraiseProgress.tsx b/components/Fund/FundraiseProgress.tsx index e469fc7a7..ba95ec632 100644 --- a/components/Fund/FundraiseProgress.tsx +++ b/components/Fund/FundraiseProgress.tsx @@ -17,6 +17,7 @@ import { useCurrencyPreference } from '@/contexts/CurrencyPreferenceContext'; import { useShareModalContext } from '@/contexts/ShareContext'; import { useRouter } from 'next/navigation'; import { Tooltip } from '@/components/ui/Tooltip'; +import { getFundraiseDisplayAmounts } from './lib/getFundraiseDisplayAmounts'; interface FundraiseProgressProps { fundraise: Fundraise; @@ -52,20 +53,22 @@ export const FundraiseProgress: FC = ({ if (!fundraise) return null; const deadlineText = fundraise.endDate ? formatDeadline(fundraise.endDate) : undefined; + const { + displayAmountRaisedUsd, + displayGoalAmountUsd, + displayAmountRaisedRsc, + displayGoalAmountRsc, + displayProgressPercent, + } = getFundraiseDisplayAmounts(fundraise); // Calculate progress percentage with a minimum of 5% for visibility const progressPercentage = fundraise.status === 'COMPLETED' ? 100 - : Math.max( - 0, - Math.min(100, Math.max(5, (fundraise.amountRaised.rsc / fundraise.goalAmount.rsc) * 100)) - ); + : Math.max(0, Math.min(100, Math.max(5, displayProgressPercent))); // Calculate actual percentage for display - const actualPercentage = Math.floor( - (fundraise.amountRaised.rsc / fundraise.goalAmount.rsc) * 100 - ); + const actualPercentage = Math.floor(displayProgressPercent); // Extract contributors if available const contributors = @@ -189,8 +192,8 @@ export const FundraiseProgress: FC = ({ = ({ = ({ = ({ raised of = ({ const isActive = fundraise.status === 'OPEN' && (fundraise.endDate ? isDeadlineInFuture(fundraise.endDate) : true); + const { + displayAmountRaisedUsd, + displayGoalAmountUsd, + displayAmountRaisedRsc, + displayGoalAmountRsc, + displayProgressPercent, + } = getFundraiseDisplayAmounts(fundraise); // Calculate progress percentage with a minimum of 5% for visibility const progressPercentage = fundraise.status === 'COMPLETED' ? 100 - : Math.max( - 0, - Math.min(100, Math.max(5, (fundraise.amountRaised.rsc / fundraise.goalAmount.rsc) * 100)) - ); + : Math.max(0, Math.min(100, Math.max(5, displayProgressPercent))); // Extract contributors if available const contributors = @@ -164,8 +169,8 @@ export const FundraiseProgress: FC = ({ = ({ / = ({ = ({ raised of { + if (fundraise.status === 'COMPLETED') { + const completedUsd = fundraise.goalAmount.usd ?? 0; + const completedRsc = fundraise.amountRaised.rsc ?? 0; + + return { + displayAmountRaisedUsd: completedUsd, + displayGoalAmountUsd: completedUsd, + displayAmountRaisedRsc: completedRsc, + displayGoalAmountRsc: completedRsc, + displayProgressPercent: 100, + }; + } + + const displayAmountRaisedRsc = fundraise.amountRaised.rsc ?? 0; + const displayGoalAmountRsc = fundraise.goalAmount.rsc ?? 0; + const displayProgressPercent = + displayGoalAmountRsc > 0 ? (displayAmountRaisedRsc / displayGoalAmountRsc) * 100 : 0; + + return { + displayAmountRaisedUsd: fundraise.amountRaised.usd ?? 0, + displayGoalAmountUsd: fundraise.goalAmount.usd ?? 0, + displayAmountRaisedRsc, + displayGoalAmountRsc, + displayProgressPercent, + }; +}; diff --git a/components/work/components/FundraiseSection.tsx b/components/work/components/FundraiseSection.tsx index 8554b33c0..b88dedb3c 100644 --- a/components/work/components/FundraiseSection.tsx +++ b/components/work/components/FundraiseSection.tsx @@ -3,9 +3,9 @@ import { Fundraise } from '@/types/funding'; import { BarChart3, Users } from 'lucide-react'; import { Icon } from '@/components/ui/icons/Icon'; -import { formatRSC } from '@/utils/number'; import { CurrencyBadge } from '@/components/ui/CurrencyBadge'; import { useCurrencyPreference } from '@/contexts/CurrencyPreferenceContext'; +import { getFundraiseDisplayAmounts } from '@/components/Fund/lib/getFundraiseDisplayAmounts'; interface FundraiseSectionProps { fundraise: Fundraise; @@ -13,7 +13,13 @@ interface FundraiseSectionProps { export function FundraiseSection({ fundraise }: FundraiseSectionProps) { const { showUSD } = useCurrencyPreference(); - const progress = (fundraise.amountRaised.rsc / fundraise.goalAmount.rsc) * 100; + const { + displayAmountRaisedUsd, + displayGoalAmountUsd, + displayAmountRaisedRsc, + displayGoalAmountRsc, + displayProgressPercent, + } = getFundraiseDisplayAmounts(fundraise); return (
@@ -26,7 +32,7 @@ export function FundraiseSection({ fundraise }: FundraiseSectionProps) {