Show points display for past challenges (PM-3238)

Author: jmgasper

src/apps/review/src/lib/components/ChallengePhaseInfo/ChallengePhaseInfo.tsx

@@ -157,30 +157,54 @@ export const ChallengePhaseInfo: FC<Props> = (props: Props) => {
         return formatCurrency(taskPaymentFromPrizeSets.value, taskPaymentFromPrizeSets.currency)
     }, [taskPaymentFromPrizeSets, formatCurrency])
 
+    const placementPrizePayment = useMemo(
+        () => computePlacementPrizePayment({
+            formatCurrency,
+            isTask,
+            isTopgearTask,
+            loginUserId: loginUserInfo?.userId,
+            prizeSets: props.challengeInfo?.prizeSets,
+            variant: props.variant ?? 'active',
+            winners: props.challengeInfo?.winners,
+        }),
+        [
+            formatCurrency,
+            isTask,
+            isTopgearTask,
+            loginUserInfo?.userId,
+            props.challengeInfo?.prizeSets,
+            props.challengeInfo?.winners,
+            props.variant,
+        ],
+    )
+
     const walletUrl = useMemo(
         () => `https://wallet.${EnvironmentConfig.TC_DOMAIN}`,
         [],
     )
 
     const formattedNonTaskPayment = useMemo(() => {
         const variant = props.variant ?? 'active'
-        if (!shouldShowPayment(
-            variant,
-            hasPayment,
-            Boolean(paymentAmount),
-            isLoadingPayment,
-            isTopgearTask,
-        )) {
+        if (variant !== 'past' || isTopgearTask) {
             return undefined
         }
 
-        return paymentAmount
+        if (hasPayment && paymentAmount && !isLoadingPayment) {
+            return paymentAmount
+        }
+
+        if (!isLoadingPayment && placementPrizePayment) {
+            return placementPrizePayment
+        }
+
+        return undefined
     }, [
         props.variant,
         hasPayment,
         paymentAmount,
         isLoadingPayment,
         isTopgearTask,
+        placementPrizePayment,
     ])
     const {
         phaseEndDateString: displayPhaseEndDateString,
@@ -360,6 +384,51 @@ export const ChallengePhaseInfo: FC<Props> = (props: Props) => {
 
 export default ChallengePhaseInfo
 
+interface PlacementPrizePaymentParams {
+    variant: string
+    isTask: boolean
+    isTopgearTask: boolean
+    prizeSets?: ChallengeInfo['prizeSets']
+    winners?: ChallengeInfo['winners']
+    loginUserId?: number
+    formatCurrency: (amount: number | string, currency?: string) => string
+}
+
+function computePlacementPrizePayment(config: PlacementPrizePaymentParams): string | undefined {
+    if (config.variant !== 'past' || config.isTask || config.isTopgearTask) {
+        return undefined
+    }
+
+    const placementPrizeSet = config.prizeSets
+        ?.find(prizeSet => (prizeSet?.type || '').toUpperCase() === 'PLACEMENT')
+    const prizes = placementPrizeSet?.prizes
+    if (!Array.isArray(prizes) || !prizes.length) {
+        return undefined
+    }
+
+    const myPlacement = config.loginUserId
+        ? config.winners
+            ?.find(w => Number(w.userId) === Number(config.loginUserId))
+            ?.placement
+        : undefined
+
+    const prize = typeof myPlacement === 'number' && myPlacement > 0
+        ? prizes[myPlacement - 1]
+        : prizes[0]
+
+    if (!prize || typeof prize.value !== 'number') {
+        return undefined
+    }
+
+    const prizeCurrency = (prize as any)?.type
+    if ((String(prizeCurrency || ''))
+        .toUpperCase() !== 'POINT') {
+        return undefined
+    }
+
+    return config.formatCurrency(prize.value, prizeCurrency)
+}
+
 function createPhaseItems(config: {
     displayPhaseLabel: string
     isTask: boolean
@@ -698,19 +767,3 @@ function getChallengeEndDateValue(data: any): string {
 
     return 'N/A'
 }
-
-function shouldShowPayment(
-    variant: string,
-    hasPayment: boolean,
-    hasPaymentAmount: boolean,
-    isLoadingPayment: boolean,
-    isTopgearTask: boolean,
-): boolean {
-    return (
-        variant === 'past'
-        && hasPayment
-        && hasPaymentAmount
-        && !isLoadingPayment
-        && !isTopgearTask
-    )
-}