APP-323 Integrate project filters (#2539)

Co-authored-by: blushi <[email protected]>
regen-network · Nov 15, 2024 · 5e847d3 · 5e847d3
1 parent acdb18b
commit 5e847d3
Show file tree

Hide file tree

Showing 30 changed files with 1,118 additions and 128 deletions.
diff --git a/web-components/src/components/molecules/ProjectTag/ProjectTag.tsx b/web-components/src/components/molecules/ProjectTag/ProjectTag.tsx
@@ -9,9 +9,15 @@ export interface Props {
   tag: ProjectTagType;
   sx?: SxProps<Theme>;
   onClick?: () => void;
+  fontSize?: any;
 }
 
-const ProjectTag = ({ tag, sx = [], onClick }: Props): JSX.Element => {
+const ProjectTag = ({
+  tag,
+  sx = [],
+  onClick,
+  fontSize = { xs: 12, sm: 14 },
+}: Props): JSX.Element => {
   const { icon, name } = tag;
 
   return (
@@ -44,7 +50,7 @@ const ProjectTag = ({ tag, sx = [], onClick }: Props): JSX.Element => {
         />
       )}
       {isValidElement(icon) && icon}
-      <Box sx={{ fontWeight: 700, fontSize: { xs: 12, sm: 14 } }}>{name}</Box>
+      <Box sx={{ fontWeight: 700, fontSize }}>{name}</Box>
     </Box>
   );
 };

diff --git a/web-components/src/components/organisms/ProjectFilters/ProjectFilter.TagFilter.tsx b/web-components/src/components/organisms/ProjectFilters/ProjectFilter.TagFilter.tsx
@@ -1,12 +1,15 @@
 import { cloneElement } from 'react';
+import { SxProps } from '@mui/system';
 
+import { Theme } from '../../../theme/muiTheme';
 import { ProjectTag } from '../../molecules/ProjectTag/ProjectTag';
 
 interface TagFilterProps {
   icon: JSX.Element;
   name: string;
   isSelected: boolean;
   onClick?: () => void;
+  sx?: SxProps<Theme>;
 }
 
 const tagSx = {
@@ -23,12 +26,23 @@ export default function TagFilter({
   name,
   isSelected,
   onClick,
+  sx = {},
 }: TagFilterProps) {
   // add isSelected prop to icon
   const iconWithProps = cloneElement(icon, { isSelected });
   return (
     <ProjectTag
-      sx={tagSx}
+      sx={{
+        ...tagSx,
+        border: isSelected
+          ? '1px solid rgba(var(--sc-tag-filter-stroke-selected))'
+          : '1px solid rgba(var(--sc-tag-filter-stroke-unselected))',
+        boxShadow: `0 1px 1px 1px rgba(0, 0, 0, 0.20) ${
+          isSelected ? 'inset' : ''
+        }`,
+        ...sx,
+      }}
+      fontSize={12}
       tag={{
         name,
         icon: iconWithProps,

diff --git a/web-components/src/components/organisms/ProjectFilters/ProjectFilters.CheckboxFilter.tsx b/web-components/src/components/organisms/ProjectFilters/ProjectFilters.CheckboxFilter.tsx
@@ -21,7 +21,7 @@ export default function CheckboxFilter({
           {icon}
         </Box>
       }
-      sx={{ mb: 2 }}
+      sx={{ mb: 2, '& .MuiFormControlLabel-label': { fontSize: '14px' } }}
     />
   );
 }
diff --git a/web-components/src/components/organisms/ProjectFilters/ProjectFilters.tsx b/web-components/src/components/organisms/ProjectFilters/ProjectFilters.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { Trans } from '@lingui/macro';
 import {
   Box,
   ButtonBase,
@@ -9,7 +8,6 @@ import {
   useTheme,
 } from '@mui/material';
 
-import { Subtitle, Title } from '../../typography';
 import TagFilter from './ProjectFilter.TagFilter';
 import CheckboxFilter from './ProjectFilters.CheckboxFilter';
 
@@ -39,12 +37,14 @@ export default function ProjectFilters({
   onFilterChange,
   onFilterReset,
   labels,
+  showResetButton = true,
 }: {
   filters: Filter[];
   activeFilterIds: string[];
   onFilterChange: (id: string) => void;
   onFilterReset: () => void;
   labels: ProjectFilterLabels;
+  showResetButton?: boolean;
 }) {
   const theme = useTheme();
   const isXs = useMediaQuery(theme.breakpoints.down('sm'));
@@ -54,42 +54,46 @@ export default function ProjectFilters({
   };
   return (
     <>
-      <Box display="flex" justifyContent="space-between" alignItems="baseline">
-        <Title variant="h4">{labels.title}</Title>
-        <Subtitle onClick={onFilterReset} sx={{ cursor: 'pointer' }}>
-          {labels.reset}
-        </Subtitle>
-      </Box>
+      <div className="justify-between items-baseline flex">
+        <div className="text-[18px] font-bold">{labels.title}</div>
+        <div
+          className="cursor-pointer text-[14px] text-sc-text-link font-bold"
+          onClick={onFilterReset}
+        >
+          {showResetButton && labels.reset}
+        </div>
+      </div>
       <Divider sx={{ my: 5 }} />
       {filters.map((filter, index) => {
         return (
           <Box sx={{ mb: 5 }} key={filter.title}>
-            <Title variant="h5" sx={{ mb: 5 }}>
+            <div className="text-[16px] font-bold mb-[20px] ">
               {filter.title}
-            </Title>
+            </div>
 
             <Collapse
               in={
                 // always show expanded for filter without hasCollapse
                 !filter.hasCollapse || (filter.hasCollapse && isExpanded[index])
               }
-              collapsedSize={isXs ? 110 : 130}
+              collapsedSize={isXs ? 110 : 110}
             >
               {filter.displayType === 'tag' && (
-                <Box display="flex" flexWrap="wrap" gap={2}>
+                <Box display="flex" flexWrap="wrap" gap={2} className="ml-1">
                   {filter.options.map(({ name, icon, id }) => (
                     <TagFilter
                       name={name}
                       icon={icon}
                       key={id}
                       isSelected={activeFilterIds.includes(id)}
                       onClick={() => onFilterChange(id)}
+                      sx={{ fontFamily: theme => theme.typography.fontFamily }}
                     />
                   ))}
                 </Box>
               )}
               {filter.displayType === 'checkbox' && (
-                <Box display="flex" flexDirection="column">
+                <div className="flex flex-column flex-wrap">
                   {filter.options.map(({ name, icon, id }) => (
                     <CheckboxFilter
                       isSelected={activeFilterIds.includes(id)}
@@ -99,14 +103,15 @@ export default function ProjectFilters({
                       onChange={() => onFilterChange(id)}
                     />
                   ))}
-                </Box>
+                </div>
               )}
             </Collapse>
             {filter.hasCollapse && (
               <ButtonBase
                 disableRipple
                 onClick={() => handleExpand(index)}
                 sx={{ fontWeight: '700' }}
+                className="text-sc-text-link"
               >
                 {isExpanded[index] ? labels.collapse : labels.expand}
               </ButtonBase>

diff --git a/web-marketplace/src/components/organisms/SellOrdersActionsBar/SellOrdersActionsBar.tsx b/web-marketplace/src/components/organisms/SellOrdersActionsBar/SellOrdersActionsBar.tsx
@@ -19,6 +19,7 @@ import {
   getProjectCardBodyTextMapping,
   getProjectCardButtonMapping,
 } from 'lib/constants/shared.constants';
+import { IS_REGEN } from 'lib/env';
 import { useWallet } from 'lib/wallet/wallet';
 
 import { EDIT_PROJECT } from 'pages/ProjectEdit/ProjectEdit.constants';
@@ -173,47 +174,49 @@ export const SellOrdersActionsBar = ({
                 {_(BOOK_CALL)}
               </OutlinedButton>
             )}
-            {onBuyButtonClick && !!onChainProjectId && !!onChainCreditClassId && (
-              <InfoTooltip
-                title={
-                  isSoldOut
-                    ? _(SOLD_OUT_TOOLTIP)
-                    : isBuyButtonDisabled
-                    ? _(BUY_DISABLED_TOOLTIP)
-                    : ''
-                }
-                arrow
-                placement="top"
-              >
-                <span>
-                  <ContainedButton
-                    startIcon={
-                      <CurrentCreditsIcon height="18px" width="18px" />
-                    }
-                    onClick={() => {
-                      track<Buy1Event>('buy1', {
-                        url: location.pathname,
-                        buttonLocation: 'stickyNav',
-                        projectName,
-                        projectId: onChainProjectId,
-                        creditClassId: onChainCreditClassId,
-                        creditClassName,
-                      });
-                      onBuyButtonClick();
-                    }}
-                    disabled={isBuyButtonDisabled}
-                    sx={{
-                      height: '100%',
-                      backgroundImage:
-                        'linear-gradient(197deg, rgba(var(--sc-gradient-lighter-gradient-500) / 1) 14.67%, rgba(var(--sc-gradient-lighter-gradient-300) / 1) 97.14%)',
-
-                    }}
-                  >
-                    {isMobile ? _(msg`BUY`) : _(msg`BUY CREDITS`)}
-                  </ContainedButton>
-                </span>
-              </InfoTooltip>
-            )}
+            {IS_REGEN &&
+              onBuyButtonClick &&
+              !!onChainProjectId &&
+              !!onChainCreditClassId && (
+                <InfoTooltip
+                  title={
+                    isSoldOut
+                      ? _(SOLD_OUT_TOOLTIP)
+                      : isBuyButtonDisabled
+                      ? _(BUY_DISABLED_TOOLTIP)
+                      : ''
+                  }
+                  arrow
+                  placement="top"
+                >
+                  <span>
+                    <ContainedButton
+                      startIcon={
+                        <CurrentCreditsIcon height="18px" width="18px" />
+                      }
+                      onClick={() => {
+                        track<Buy1Event>('buy1', {
+                          url: location.pathname,
+                          buttonLocation: 'stickyNav',
+                          projectName,
+                          projectId: onChainProjectId,
+                          creditClassId: onChainCreditClassId,
+                          creditClassName,
+                        });
+                        onBuyButtonClick();
+                      }}
+                      disabled={isBuyButtonDisabled}
+                      sx={{
+                        height: '100%',
+                        backgroundImage:
+                          'linear-gradient(197deg, rgba(var(--sc-gradient-lighter-gradient-500) / 1) 14.67%, rgba(var(--sc-gradient-lighter-gradient-300) / 1) 97.14%)',
+                      }}
+                    >
+                      {isMobile ? _(msg`BUY`) : _(msg`BUY CREDITS`)}
+                    </ContainedButton>
+                  </span>
+                </InfoTooltip>
+              )}
           </>
         )}
         {children}

diff --git a/...ace/src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCredits.utils.tsx b/...ace/src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCredits.utils.tsx
@@ -26,7 +26,6 @@ export function getTerrasosCreditsTabs({
   projectBatchTotals,
   projectPageMetadata,
   projectMetadata,
-  isOnChain,
   complianceInfo,
   complianceCredits,
   isComplianceProject,
@@ -37,18 +36,21 @@ export function getTerrasosCreditsTabs({
     text: complianceInfoItem?.bookCallLink?.text ?? '',
   };
   const description = complianceInfoItem?.descriptionRaw;
+  const metadata = projectPageMetadata || projectMetadata;
 
   return [
     {
       label: _(msg`Tebu Credits`),
-      content: projectPageMetadata && (
+      content: metadata && (
         <TebuInfo
           projectBatchTotals={projectBatchTotals}
-          projectPageMetadata={projectPageMetadata}
+          projectMetadata={metadata}
           _={_}
         />
       ),
-      hidden: !(projectPageMetadata && isOnChain),
+      hidden:
+        !metadata ||
+        !projectMetadata?.['regen:marketType']?.includes('VOLUNTARY_MARKET'),
     },
     {
       label: _(msg`Compliance Credits`),

diff --git a/...nents/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.ComplianceInfo.tsx b/...nents/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.ComplianceInfo.tsx
@@ -82,10 +82,19 @@ const ComplianceInfo = ({
           <MetaDetail
             label={_(msg`environmental authority`)}
             value={environmentalAuthority}
+            bodySize="lg"
+          />
+          <MetaDetail
+            label={_(msg`watershed`)}
+            value={watershed}
+            bodySize="lg"
+          />
+          <MetaDetail
+            label={_(msg`sub-watershed`)}
+            value={subWatershed}
+            bodySize="lg"
           />
-          <MetaDetail label={_(msg`watershed`)} value={watershed} />
-          <MetaDetail label={_(msg`sub-watershed`)} value={subWatershed} />
-          <MetaDetail label={_(msg`biome`)} value={biomeType} />
+          <MetaDetail label={_(msg`biome`)} value={biomeType} bodySize="lg" />
         </Grid>
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-[20px] mt-4 justify-items-center sm:justify-items-start"></div>
       </div>

diff --git a/.../components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.TebuInfo.tsx b/.../components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.TebuInfo.tsx
@@ -22,34 +22,34 @@ import {
 interface TebuInfoProps {
   projectBatchTotals?: JSX.Element;
   _: TranslatorType;
-  projectPageMetadata: ProjectPageMetadataLD;
+  projectMetadata: ProjectPageMetadataLD;
 }
 
 const TebuInfo: React.FC<TebuInfoProps> = ({
   projectBatchTotals,
-  projectPageMetadata,
+  projectMetadata,
   _,
 }) => {
   const [selectedLanguage] = useAtom(selectedLanguageAtom);
   const learnMoreLink = `//terrasos.co/${selectedLanguage}/what-is-tebu`;
 
-  const conservationStatus = projectPageMetadata?.['regen:conservationStatus'];
+  const conservationStatus = projectMetadata?.['regen:conservationStatus'];
   const threatCard = conservationStatus && getThreatCard(_, conservationStatus);
 
   const ecologicalConnectivityIndex =
-    projectPageMetadata?.['regen:ecologicalConnectivityIndex'];
+    projectMetadata?.['regen:ecologicalConnectivityIndex'];
   const connectivityCard =
     ecologicalConnectivityIndex &&
     getConnectivityCard(_, ecologicalConnectivityIndex);
 
-  const duration = projectPageMetadata?.['regen:projectDuration'];
+  const duration = projectMetadata?.['regen:projectDuration'];
   // TODO: set this based on methodology schema version
   const minimumDuration = 20;
   const maximumDuration = 30;
   const durationCard =
     duration && getDurationCard(_, duration, minimumDuration, maximumDuration);
 
-  const managementAreas = projectPageMetadata?.['regen:managementAreas'];
+  const managementAreas = projectMetadata?.['regen:managementAreas'];
   const { preservationArea, restorationArea } =
     getManagementAreasValues(managementAreas);
   // TODO: validate management areas
@@ -59,8 +59,7 @@ const TebuInfo: React.FC<TebuInfoProps> = ({
     getAreaActionsCard(_, preservationArea, restorationArea);
 
   // TODO: update data standard to use levels instead of float values
-  const socialCulturalIndex =
-    projectPageMetadata?.['regen:socialCulturalIndex'];
+  const socialCulturalIndex = projectMetadata?.['regen:socialCulturalIndex'];
   const socialCulturalCard =
     false && getSocialCulturalCard(_, SocialCulturalValueType.High);
   return (

diff --git a/...src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx b/...src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx
@@ -24,7 +24,6 @@ export function getThreatCard(
   _: TranslatorType,
   conservationStatus: IucnStatus,
 ): JSX.Element {
-  console.log('conservationStatus', conservationStatus);
   const { type, factor, description } = iucnFactors[conservationStatus];
   const factorValue =
     typeof factor === 'number' ? factor.toString() : _(msg`factor`);
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,7 +21,7 @@ export default function CheckboxFilter({ @@
               {icon}
             </Box>
           }
-          sx={{ mb: 2 }}
+          sx={{ mb: 2, '& .MuiFormControlLabel-label': { fontSize: '14px' } }}
         />
       );
     }