OCT-2109 Adjust project rewards section for projects with threshold

client/src/components/Project/ProjectListItem/ProjectListItem.tsx

@@ -1,11 +1,9 @@
-import cx from 'classnames';
 import React, { FC, Fragment, useMemo } from 'react';
 
 import ProjectListItemButtonsWebsiteAndShare from 'components/Project/ProjectListItemButtonsWebsiteAndShare';
 import ProjectListItemHeader from 'components/Project/ProjectListItemHeader';
 import ProjectMilestones from 'components/Project/ProjectMilestones';
-import RewardsWithoutThreshold from 'components/shared/RewardsWithoutThreshold';
-import RewardsWithThreshold from 'components/shared/RewardsWithThreshold';
+import Rewards from 'components/shared/Rewards';
 import Description from 'components/ui/Description';
 import useCurrentEpoch from 'hooks/queries/useCurrentEpoch';
 import useProjectsIpfsWithRewards from 'hooks/queries/useProjectsIpfsWithRewards';
@@ -46,18 +44,8 @@ const ProjectListItem: FC<ProjectListItemProps> = ({
           profileImageSmall={profileImageSmall}
           website={website}
         />
-        {!isEpoch1 && epoch && epoch < 4 && (
-          <RewardsWithThreshold
-            address={address}
-            className={cx(styles.projectRewards, styles.hasPaddingAndBorder)}
-            epoch={epoch}
-            isProjectView
-            numberOfDonors={numberOfDonors}
-            totalValueOfAllocations={totalValueOfAllocations}
-          />
-        )}
-        {!isEpoch1 && (!epoch || epoch >= 4) && (
-          <RewardsWithoutThreshold
+        {!isEpoch1 && (
+          <Rewards
             address={address}
             className={styles.projectRewards}
             donations={donations}

client/src/components/Projects/ProjectsList/ProjectsList.module.scss

@@ -37,5 +37,5 @@
   width: 100%;
   height: 0.1rem;
   background-color: $color-octant-grey1;
-  margin: 0 0 1.6rem;
+  margin: 1.6rem 0;
 }

client/src/components/Projects/ProjectsListItem/ProjectsListItem.module.scss

@@ -76,6 +76,7 @@
   }
 
   .projectRewards {
+    display: flex;
     flex: 1;
     padding: 0 $projectItemPadding;
   }

client/src/components/Projects/ProjectsListItem/ProjectsListItem.tsx

@@ -4,8 +4,7 @@ import { useNavigate } from 'react-router-dom';
 
 import ProjectsListSkeletonItem from 'components/Projects/ProjectsListSkeletonItem/ProjectsListSkeletonItem';
 import ButtonAddToAllocate from 'components/shared/ButtonAddToAllocate';
-import RewardsWithoutThreshold from 'components/shared/RewardsWithoutThreshold';
-import RewardsWithThreshold from 'components/shared/RewardsWithThreshold';
+import Rewards from 'components/shared/Rewards';
 import Description from 'components/ui/Description';
 import Img from 'components/ui/Img';
 import TinyLabel from 'components/ui/TinyLabel';
@@ -142,17 +141,8 @@ const ProjectsListItem: FC<ProjectsListItemProps> = ({
               text={introDescription!}
             />
           </div>
-          {!isEpoch1 && epoch && epoch < 4 && (
-            <RewardsWithThreshold
-              address={address}
-              className={styles.projectRewards}
-              epoch={epoch}
-              numberOfDonors={projectIpfsWithRewards.numberOfDonors}
-              totalValueOfAllocations={projectIpfsWithRewards.totalValueOfAllocations}
-            />
-          )}
-          {!isEpoch1 && (!epoch || epoch >= 4) && (
-            <RewardsWithoutThreshold
+          {!isEpoch1 && (
+            <Rewards
               address={address}
               className={styles.projectRewards}
               epoch={epoch}

client/src/components/shared/RewardsWithoutThreshold/RewardsWithoutThreshold.module.scss → client/src/components/shared/Rewards/Rewards.module.scss

@@ -4,6 +4,7 @@
   align-items: stretch;
   align-self: stretch;
   justify-content: space-between;
+  flex: 1;
 
   &.variant-- {
     &projectView {
@@ -84,6 +85,10 @@
         color: $color-octant-dark;
         font-size: $font-size-18;
 
+        &:not(.isDonationAboveThreshold) {
+          color: $color-octant-grey5;
+        }
+
         @media #{$tablet-up} {
           font-size: $font-size-14;
         }

client/src/components/shared/RewardsWithoutThreshold/RewardsWithoutThreshold.tsx → client/src/components/shared/Rewards/Rewards.tsx

@@ -8,15 +8,16 @@ import Button from 'components/ui/Button';
 import useGetValuesToDisplay from 'hooks/helpers/useGetValuesToDisplay';
 import useIdsInAllocation from 'hooks/helpers/useIdsInAllocation';
 import useIsAllocatedTo from 'hooks/helpers/useIsAllocatedTo';
+import useIsDonationAboveThreshold from 'hooks/helpers/useIsDonationAboveThreshold';
 import useMediaQuery from 'hooks/helpers/useMediaQuery';
 import useIsDecisionWindowOpen from 'hooks/queries/useIsDecisionWindowOpen';
 import useUserAllocations from 'hooks/queries/useUserAllocations';
 import useAllocationsStore from 'store/allocations/store';
 
-import styles from './RewardsWithoutThreshold.module.scss';
-import RewardsWithoutThresholdProps from './types';
+import styles from './Rewards.module.scss';
+import RewardsProps from './types';
 
-const RewardsWithoutThreshold: FC<RewardsWithoutThresholdProps> = ({
+const Rewards: FC<RewardsProps> = ({
   address,
   className,
   epoch,
@@ -35,6 +36,7 @@ const RewardsWithoutThreshold: FC<RewardsWithoutThresholdProps> = ({
   const getValuesToDisplay = useGetValuesToDisplay();
   const { data: isDecisionWindowOpen } = useIsDecisionWindowOpen();
   const { data: userAllocations } = useUserAllocations(epoch);
+  const isDonationAboveThreshold = useIsDonationAboveThreshold({ epoch, projectAddress: address });
 
   const { allocations, addAllocations, removeAllocations } = useAllocationsStore(state => ({
     addAllocations: state.addAllocations,
@@ -87,6 +89,9 @@ const RewardsWithoutThreshold: FC<RewardsWithoutThresholdProps> = ({
   }).primary;
 
   const leftSectionLabel = useMemo(() => {
+    if (!isDonationAboveThreshold) {
+      return i18n.t('common.totalDonated');
+    }
     if (!isArchivedProject) {
       return t('currentTotal');
     }
@@ -108,7 +113,13 @@ const RewardsWithoutThreshold: FC<RewardsWithoutThresholdProps> = ({
             <div className={styles.label} data-test="ProjectRewards__currentTotal__label">
               {leftSectionLabel}
             </div>
-            <div className={styles.value} data-test="ProjectRewards__currentTotal__number">
+            <div
+              className={cx(
+                styles.value,
+                isDonationAboveThreshold && styles.isDonationAboveThreshold,
+              )}
+              data-test="ProjectRewards__currentTotal__number"
+            >
               {currentTotalIncludingMFForProjectsAboveThresholdToDisplay}
             </div>
           </div>
@@ -118,14 +129,28 @@ const RewardsWithoutThreshold: FC<RewardsWithoutThresholdProps> = ({
               <div className={cx(styles.section, styles[`variant--${variant}`])}>
                 <div className={styles.container}>
                   <div className={styles.label}>{i18n.t('common.donations')}</div>
-                  <div className={styles.value}>{donationsToDisplay}</div>
+                  <div
+                    className={cx(
+                      styles.value,
+                      isDonationAboveThreshold && styles.isDonationAboveThreshold,
+                    )}
+                  >
+                    {donationsToDisplay}
+                  </div>
                 </div>
               </div>
               {variant === 'projectView' && <div className={cx(styles.verticalDivider)} />}
               <div className={cx(styles.section, styles[`variant--${variant}`])}>
                 <div className={styles.container}>
                   <div className={styles.label}>{i18n.t('common.matchFunding')}</div>
-                  <div className={styles.value}>{matchFundingToDisplay}</div>
+                  <div
+                    className={cx(
+                      styles.value,
+                      isDonationAboveThreshold && styles.isDonationAboveThreshold,
+                    )}
+                  >
+                    {matchFundingToDisplay}
+                  </div>
                 </div>
               </div>
             </>
@@ -136,7 +161,14 @@ const RewardsWithoutThreshold: FC<RewardsWithoutThresholdProps> = ({
             onClick={isMobile ? () => {} : () => setIsFullDonorsListModalOpen(true)}
           >
             <div className={styles.label}>{i18n.t('common.donors')}</div>
-            <div className={styles.value}>{numberOfDonors}</div>
+            <div
+              className={cx(
+                styles.value,
+                isDonationAboveThreshold && styles.isDonationAboveThreshold,
+              )}
+            >
+              {numberOfDonors}
+            </div>
           </div>
         </div>
       </div>
@@ -169,4 +201,4 @@ const RewardsWithoutThreshold: FC<RewardsWithoutThresholdProps> = ({
     </div>
   );
 };
-export default RewardsWithoutThreshold;
+export default Rewards;

client/src/components/shared/RewardsWithThreshold/index.tsx → client/src/components/shared/Rewards/index.tsx

@@ -1,2 +1,2 @@
 // eslint-disable-next-line no-restricted-exports
-export { default } from './RewardsWithThreshold';
+export { default } from './Rewards';

client/src/components/shared/RewardsWithoutThreshold/types.ts → client/src/components/shared/Rewards/types.ts

@@ -1,6 +1,6 @@
 import { ProjectIpfsWithRewards } from 'hooks/queries/useProjectsIpfsWithRewards';
 
-export default interface RewardsWithoutThresholdProps {
+export default interface RewardsProps {
   address: string;
   className?: string;
   donations?: ProjectIpfsWithRewards['donations'];