Skip to content

Fix display of completed fundraise amounts #688

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TylerDiorio wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix display of completed fundraise amounts #688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 16 additions & 17 deletions components/Fund/FundraiseProgress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -52,20 +53,22 @@ export const FundraiseProgress: FC<FundraiseProgressProps> = ({
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 =
Expand Down Expand Up @@ -189,8 +192,8 @@ export const FundraiseProgress: FC<FundraiseProgressProps> = ({
<CurrencyBadge
amount={
showUSD
? Math.round(fundraise.amountRaised.usd)
: Math.round(fundraise.amountRaised.rsc)
? Math.round(displayAmountRaisedUsd)
: Math.round(displayAmountRaisedRsc)
}
variant="text"
size="xs"
Expand All @@ -205,9 +208,7 @@ export const FundraiseProgress: FC<FundraiseProgressProps> = ({
</span>
<CurrencyBadge
amount={
showUSD
? Math.round(fundraise.goalAmount.usd)
: Math.round(fundraise.goalAmount.rsc)
showUSD ? Math.round(displayGoalAmountUsd) : Math.round(displayGoalAmountRsc)
}
variant="text"
size="xs"
Expand Down Expand Up @@ -295,8 +296,8 @@ export const FundraiseProgress: FC<FundraiseProgressProps> = ({
<CurrencyBadge
amount={
showUSD
? Math.round(fundraise.amountRaised.usd)
: Math.round(fundraise.amountRaised.rsc)
? Math.round(displayAmountRaisedUsd)
: Math.round(displayAmountRaisedRsc)
}
variant="text"
size="md"
Expand All @@ -308,9 +309,7 @@ export const FundraiseProgress: FC<FundraiseProgressProps> = ({
<span className="text-gray-500 text-base mobile:!text-lg">raised of</span>
<CurrencyBadge
amount={
showUSD
? Math.round(fundraise.goalAmount.usd)
: Math.round(fundraise.goalAmount.rsc)
showUSD ? Math.round(displayGoalAmountUsd) : Math.round(displayGoalAmountRsc)
}
variant="text"
size="md"
Expand Down
29 changes: 15 additions & 14 deletions components/Fund/FundraiseProgressV2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { Tooltip } from '@/components/ui/Tooltip';
import { StatusCard } from '@/components/ui/StatusCard';
import { colors } from '@/app/styles/colors';
import { useAuthenticatedAction } from '@/contexts/AuthModalContext';
import { getFundraiseDisplayAmounts } from './lib/getFundraiseDisplayAmounts';

interface FundraiseProgressProps {
fundraise: Fundraise;
Expand Down Expand Up @@ -54,15 +55,19 @@ export const FundraiseProgress: FC<FundraiseProgressProps> = ({
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 =
Expand Down Expand Up @@ -164,8 +169,8 @@ export const FundraiseProgress: FC<FundraiseProgressProps> = ({
<CurrencyBadge
amount={
showUSD
? Math.round(fundraise.amountRaised.usd)
: Math.round(fundraise.amountRaised.rsc)
? Math.round(displayAmountRaisedUsd)
: Math.round(displayAmountRaisedRsc)
}
variant="text"
size="md"
Expand All @@ -183,9 +188,7 @@ export const FundraiseProgress: FC<FundraiseProgressProps> = ({
<span className="text-xs text-gray-500 mx-0.5">/</span>
<CurrencyBadge
amount={
showUSD
? Math.round(fundraise.goalAmount.usd)
: Math.round(fundraise.goalAmount.rsc)
showUSD ? Math.round(displayGoalAmountUsd) : Math.round(displayGoalAmountRsc)
}
variant="text"
size="md"
Expand Down Expand Up @@ -295,8 +298,8 @@ export const FundraiseProgress: FC<FundraiseProgressProps> = ({
<CurrencyBadge
amount={
showUSD
? Math.round(fundraise.amountRaised.usd)
: Math.round(fundraise.amountRaised.rsc)
? Math.round(displayAmountRaisedUsd)
: Math.round(displayAmountRaisedRsc)
}
variant="text"
size="md"
Expand All @@ -308,9 +311,7 @@ export const FundraiseProgress: FC<FundraiseProgressProps> = ({
<span className="text-gray-500 text-base mobile:!text-lg">raised of</span>
<CurrencyBadge
amount={
showUSD
? Math.round(fundraise.goalAmount.usd)
: Math.round(fundraise.goalAmount.rsc)
showUSD ? Math.round(displayGoalAmountUsd) : Math.round(displayGoalAmountRsc)
}
variant="text"
size="md"
Expand Down
37 changes: 37 additions & 0 deletions components/Fund/lib/getFundraiseDisplayAmounts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import type { Fundraise } from '@/types/funding';

interface FundraiseDisplayAmounts {
displayAmountRaisedUsd: number;
displayGoalAmountUsd: number;
displayAmountRaisedRsc: number;
displayGoalAmountRsc: number;
displayProgressPercent: number;
}

export const getFundraiseDisplayAmounts = (fundraise: Fundraise): FundraiseDisplayAmounts => {
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,
};
};
16 changes: 11 additions & 5 deletions components/work/components/FundraiseSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,23 @@
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;
}

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 (
<section>
Expand All @@ -26,7 +32,7 @@ export function FundraiseSection({ fundraise }: FundraiseSectionProps) {
<div className="space-y-2">
<div className="flex justify-between text-sm">
<CurrencyBadge
amount={showUSD ? fundraise.amountRaised.usd : fundraise.amountRaised.rsc}
amount={showUSD ? displayAmountRaisedUsd : displayAmountRaisedRsc}
variant="text"
size="xs"
currency={showUSD ? 'USD' : 'RSC'}
Expand All @@ -35,7 +41,7 @@ export function FundraiseSection({ fundraise }: FundraiseSectionProps) {
skipConversion={showUSD}
/>
<CurrencyBadge
amount={showUSD ? fundraise.goalAmount.usd : fundraise.goalAmount.rsc}
amount={showUSD ? displayGoalAmountUsd : displayGoalAmountRsc}
variant="text"
size="xs"
currency={showUSD ? 'USD' : 'RSC'}
Expand All @@ -50,7 +56,7 @@ export function FundraiseSection({ fundraise }: FundraiseSectionProps) {
fundraise.status === 'COMPLETED' ? 'bg-green-500' : 'bg-orange-500'
}`}
style={{
width: `${fundraise.status === 'COMPLETED' ? 100 : progress}%`,
width: `${displayProgressPercent}%`,
}}
/>
</div>
Expand Down