fix: APP-474 tebu factors UI (#2548)

regen-network · Nov 20, 2024 · 150bd0f · 150bd0f
1 parent 772f925
commit 150bd0f
Show file tree

Hide file tree

Showing 19 changed files with 389 additions and 227 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/web-components/package.json b/web-components/package.json
@@ -82,7 +82,7 @@
     "react-slick": "^0.29.0",
     "slick-carousel": "^1.8.1",
     "tss-react": "4.4.1",
-    "victory": "^36.6.8",
+    "victory": "^37.3.2",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz",
     "yup": "^0.32.11",
     "zxcvbn": "^4.4.2"

diff --git a/web-components/src/components/cards/TebuCard/TebuCard.AreaActionsBody.tsx b/web-components/src/components/cards/TebuCard/TebuCard.AreaActionsBody.tsx
@@ -1,4 +1,5 @@
-import { VictoryLabel, VictoryPie } from 'victory';
+import { useMediaQuery, useTheme } from '@mui/material';
+import { LineSegment, VictoryLabel, VictoryPie } from 'victory';
 
 export interface AreaActionsProps {
   preservationArea: number;
@@ -13,26 +14,50 @@ export default function AreaActions({
   preservationLabel,
   restorationLabel,
 }: AreaActionsProps) {
+  const theme = useTheme();
+  const mobile = useMediaQuery(theme.breakpoints.down('sm'));
+
   const data = [
     { name: preservationLabel, value: preservationArea },
     { name: restorationLabel, value: restorationArea },
   ].map(item => ({ x: item.name, y: item.value }));
 
   const colors = ['rgba(var(--bc-neutral-200))', 'rgba(var(--bc-green-500))'];
+  const labelFontSize = mobile ? '12px' : '14px';
 
   return (
-    <div className="-m-[20px]">
+    <div className="-m-[20px] -mt-[40px]">
       <VictoryPie
         data={data}
         width={310}
-        height={175}
+        height={160}
         colorScale={colors}
+        startAngle={-80}
+        endAngle={280}
         labels={({ datum }) => [datum.x, `${datum.y} ha.`]}
+        labelIndicator={
+          <LineSegment
+            style={{
+              stroke: '#A5A4A4',
+            }}
+          />
+        }
+        labelIndicatorInnerOffset={30}
+        labelIndicatorOuterOffset={15}
         labelComponent={
           <VictoryLabel
+            backgroundPadding={[{ bottom: 5 }, {}]}
             style={[
-              { fontWeight: '700', fontFamily: 'inherit', fontSize: '14px' },
-              { fontWeight: '400', fontFamily: 'inherit', fontSize: '14px' },
+              {
+                fontWeight: '700',
+                fontFamily: 'inherit',
+                fontSize: labelFontSize,
+              },
+              {
+                fontWeight: '400',
+                fontFamily: 'inherit',
+                fontSize: labelFontSize,
+              },
             ]}
           />
         }

diff --git a/web-components/src/components/cards/TebuCard/TebuCard.CommonBody.tsx b/web-components/src/components/cards/TebuCard/TebuCard.CommonBody.tsx
@@ -18,7 +18,7 @@ const ThreatBody: React.FC<ThreatBodyProps> = ({
     <Box className="flex gap-[10px]">
       <Box>{icon}</Box>
       <Box>
-        <Body className="font-montserrat text-[16px] mt-[12px] font-bold">
+        <Body className="font-montserrat text-[16px] mt-[12px] font-bold mb-5">
           {title}
         </Body>
         <Body className="font-montserrat text-[12px] pmb-[10px]">

diff --git a/web-components/src/components/cards/TebuCard/TebuCard.tsx b/web-components/src/components/cards/TebuCard/TebuCard.tsx
@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box';
 import cn from 'classnames';
 
 import Card from '../../cards/Card';
@@ -27,34 +26,32 @@ export default function TebuCard({
   return (
     <Card
       className={cn(
-        'text-sc-text-header w-full min-w-[250px] max-w-[330px] sm:max-w-[310px] font-montserrat',
+        'text-sc-text-header w-full min-w-[250px] h-[239px] font-montserrat border-sc-card-standard-stroke relative',
         className,
       )}
     >
-      <Box className="flex items-center gap-[10px] pl-[20px] pr-[3px] sm:pr-[5px] py-[15px] text-[12px] bg-sc-card-standard-header-background">
+      <div className="flex items-center gap-10 pl-20 pr-3 sm:pr-5 py-15 text-[12px] bg-sc-card-standard-header-background">
         <Body className="tracking-[1px] text-[11px] sm:text-[12px] uppercase font-extrabold text-sc-text-sub-header">
           {header}
         </Body>
         {headerTooltip && (
           <InfoTooltip title={headerTooltip || ''} arrow placement="top">
-            <Box className="cursor-pointer m-0">
+            <div className="cursor-pointer m-0">
               <InfoIconOutlined className="-mb-3 w-[17px] h-[17px]" />
-            </Box>
+            </div>
           </InfoTooltip>
         )}
-      </Box>
-      <Box className="p-[20px]">
-        {children}
-        <Box className="flex flex-col items-end">
-          {footerLabels?.length &&
-            footerLabels.map(({ label, value }) => (
-              <Box className="flex items-center" key={label}>
-                <Body className="text-[12px]">{label}</Body>
-                <Body className="font-bold ml-3 text-[12px]">{value}</Body>
-              </Box>
-            ))}
-        </Box>
-      </Box>
+      </div>
+      <div className="p-20">{children}</div>
+      <div className="absolute bottom-20 right-20">
+        {footerLabels?.length &&
+          footerLabels.map(({ label, value }) => (
+            <div className="flex items-center" key={label}>
+              <Body className="text-[12px]">{label}</Body>
+              <Body className="font-bold ml-3 text-[12px]">{value}</Body>
+            </div>
+          ))}
+      </div>
     </Card>
   );
 }
diff --git a/web-components/src/components/tabs/IconTabs.tsx b/web-components/src/components/tabs/IconTabs.tsx
@@ -33,6 +33,7 @@ interface IconTabsProps {
   hideIndicator?: boolean;
   mobileFullWidth?: boolean;
   className?: string;
+  tabOuterClassName?: string;
 }
 
 const StyledTabs = styled(Tabs, {
@@ -74,6 +75,7 @@ const IconTabs: React.FC<React.PropsWithChildren<IconTabsProps>> = ({
   hideIndicator = false,
   mobileFullWidth = false,
   className,
+  tabOuterClassName,
 }) => {
   const [value, setValue] = useState(activeTab);
   const hasContent = tabs.some(tab => tab.content !== undefined);
@@ -98,6 +100,7 @@ const IconTabs: React.FC<React.PropsWithChildren<IconTabsProps>> = ({
           ...sxs?.tab?.outer,
           mx: mobileFullWidth ? { xs: -4, sm: -10, md: 0 } : 0,
         }}
+        className={tabOuterClassName}
       >
         <StyledTabs
           value={value}

diff --git a/web-marketplace/src/components/molecules/ProjectBatchTotals/ProjectBatchTotals.tsx b/web-marketplace/src/components/molecules/ProjectBatchTotals/ProjectBatchTotals.tsx
@@ -37,11 +37,13 @@ export function ProjectBatchTotals({
   projectWithOrderData,
   soldOutProjectsIds,
   sx = [],
+  className,
 }: {
   totals: BatchTotalsForProject;
   projectWithOrderData?: NormalizeProject;
   soldOutProjectsIds: string[];
   sx?: SxProps<Theme>;
+  className?: string;
 }): JSX.Element {
   const { _ } = useLingui();
   const isSoldOut = getIsSoldOut({
@@ -70,6 +72,7 @@ export function ProjectBatchTotals({
         },
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
+      className={className}
     >
       <GridItem>
         <LabeledValue

diff --git a/web-marketplace/src/components/organisms/ProjectTopSection/ProjectTopSection.tsx b/web-marketplace/src/components/organisms/ProjectTopSection/ProjectTopSection.tsx
@@ -323,10 +323,7 @@ function ProjectTopSection({
                     projectWithOrderData={projectWithOrderData}
                     soldOutProjectsIds={soldOutProjectsIds}
                     totals={batchData.totals}
-                    sx={{
-                      mt: { xs: pxToRem(30), sm: pxToRem(50) },
-                      mb: pxToRem(30),
-                    }}
+                    className="my-30 sm:my-50"
                   />
                 ) : undefined
               }

diff --git a/web-marketplace/src/components/organisms/TableTabs.tsx b/web-marketplace/src/components/organisms/TableTabs.tsx
@@ -12,9 +12,10 @@ import { Theme } from 'web-components/src/theme/muiTheme';
 type Props = {
   sx?: SxProps<Theme>;
   tabs: IconTabProps[];
+  tabOuterClassName?: string;
 };
 
-export const TableTabs = ({ tabs, sx = [] }: Props) => {
+export const TableTabs = ({ tabs, sx = [], tabOuterClassName }: Props) => {
   const theme = useTheme();
   if (tabs.length === 0) {
     return null;
@@ -50,6 +51,7 @@ export const TableTabs = ({ tabs, sx = [] }: Props) => {
           },
           panel: { inner: { p: 0 } },
         }}
+        tabOuterClassName={tabOuterClassName}
       />
     </Box>
   );

diff --git a/...ace/src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCredits.utils.tsx b/...ace/src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCredits.utils.tsx
@@ -7,6 +7,8 @@ import { ComplianceInfoQuery } from 'generated/sanity-graphql';
 import { ProjectMetadataLD, ProjectPageMetadataLD } from 'lib/db/types/json-ld';
 import { TranslatorType } from 'lib/i18n/i18n.types';
 
+import { VOLUNTARY_MARKET } from 'pages/Projects/AllProjects/AllProjects.constants';
+
 import ComplianceInfo from './TerrasosCreditsInfo.ComplianceInfo';
 import TebuInfo from './TerrasosCreditsInfo.TebuInfo';
 
@@ -50,7 +52,7 @@ export function getTerrasosCreditsTabs({
       ),
       hidden:
         !metadata ||
-        !projectMetadata?.['regen:marketType']?.includes('VOLUNTARY_MARKET'),
+        !metadata?.['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
@@ -1,19 +1,19 @@
 import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
-import { Box, ButtonBase, Grid } from '@mui/material';
+import { Grid } from '@mui/material';
 
 import {
   BlockContent,
   SanityBlockContent,
 } from 'web-components/src/components/block-content';
-import SmallArrowIcon from 'web-components/src/components/icons/SmallArrowIcon';
-import { pxToRem } from 'web-components/src/theme/muiTheme';
 import { LinkType } from 'web-components/src/types/shared/linkType';
 
 import { ProjectMetadataLD } from 'lib/db/types/json-ld';
 
 import { MetaDetail } from 'components/molecules';
 
+import { InfoTemplate } from './TerrasosCreditsInfo.InfoTemplate';
+
 import ComplianceMarketIcon from 'assets/svgs/checkmarkList.svg';
 
 type Props = {
@@ -40,38 +40,39 @@ const ComplianceInfo = ({
   const biomeType = projectMetadata?.['regen:biomeType'];
 
   return (
-    <Box
-      sx={{
-        px: pxToRem(30),
-        pb: pxToRem(30),
-        pt: pxToRem(10),
-        backgroundColor: 'primary.main',
-        border: '1px solid',
-        borderColor: 'info.light',
-        borderRadius: '0 0 8px 8px',
-      }}
+    <InfoTemplate
+      upperContent={complianceCredits}
+      title={_(msg`Compliance info`)}
+      imgSrc={ComplianceMarketIcon}
+      imgAlt={_(msg`Checkmark list`)}
+      description={<BlockContent content={description} />}
+      learnMoreLink={learnMoreLink}
     >
-      {!!complianceCredits && complianceCredits}
-      <div>
-        <div className="font-montserrat text-[32px] font-bold gap-[10px] flex items-center">
-          {_(msg`Compliance info`)}
-          <img
-            src={ComplianceMarketIcon}
-            alt={_(msg`Checkmark list`)}
-            className="h-[50px] w-[50px]"
+      <>
+        <Grid container spacing={8}>
+          <MetaDetail label={_(msg`region`)} value={region} bodySize="lg" />
+          <MetaDetail
+            label={_(msg`department`)}
+            value={department}
+            bodySize="lg"
+          />
+          <MetaDetail
+            label={_(msg`environmental authority`)}
+            value={environmentalAuthority}
+            bodySize="lg"
           />
-        </div>
-        <div className="my-10">
-          <BlockContent content={description} />
-        </div>
-        <ButtonBase
-          href={learnMoreLink.href}
-          target="_blank"
-          className="cursor-pointer font-montserrat text-sc-text-link font-extrabold text-[14px] tracking-[1px] uppercase mb-[30px]"
-        >
-          {learnMoreLink.text}
-          <SmallArrowIcon sx={{ width: '7px', ml: '4px' }} />
-        </ButtonBase>
+          <MetaDetail
+            label={_(msg`watershed`)}
+            value={watershed}
+            bodySize="lg"
+          />
+          <MetaDetail
+            label={_(msg`sub-watershed`)}
+            value={subWatershed}
+            bodySize="lg"
+          />
+          <MetaDetail label={_(msg`biome`)} value={biomeType} bodySize="lg" />
+        </Grid>
         <Grid container spacing={8}>
           <MetaDetail label={_(msg`region`)} value={region} bodySize="lg" />
           <MetaDetail
@@ -96,9 +97,8 @@ const ComplianceInfo = ({
           />
           <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>
-    </Box>
+      </>
+    </InfoTemplate>
   );
 };
 

diff --git a/...ponents/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.InfoTemplate.tsx b/...ponents/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.InfoTemplate.tsx
@@ -0,0 +1,49 @@
+import { ButtonBase } from '@mui/material';
+
+import SmallArrowIcon from 'web-components/src/components/icons/SmallArrowIcon';
+import { Title } from 'web-components/src/components/typography';
+import { LinkType } from 'web-components/src/types/shared/linkType';
+
+type InfoTemplateProps = {
+  upperContent?: JSX.Element;
+  title: string;
+  imgSrc: string;
+  imgAlt: string;
+  description: string | JSX.Element;
+  children: JSX.Element;
+  learnMoreLink: LinkType;
+};
+
+export const InfoTemplate = ({
+  upperContent,
+  title,
+  imgSrc,
+  imgAlt,
+  description,
+  learnMoreLink,
+  children,
+}: InfoTemplateProps) => {
+  return (
+    <div className="sm:px-30 px-20 pb-40 border-solid border border-sc-card-standard-stroke rounded-b-10 bg-card-standard-background">
+      {!!upperContent && upperContent}
+      <div className={!upperContent ? 'mt-30 sm:mt-50' : undefined}>
+        <div className="gap-[10px] flex items-center">
+          <Title variant="h3" mobileVariant="h5">
+            {title}
+          </Title>
+          <img src={imgSrc} alt={imgAlt} className="h-50 w-50" />
+        </div>
+        <div className="my-10">{description}</div>
+        <ButtonBase
+          href={learnMoreLink.href}
+          target="_blank"
+          className="cursor-pointer font-montserrat text-sc-text-link font-extrabold text-[14px] tracking-[1px] uppercase mb-[30px]"
+        >
+          {learnMoreLink.text}
+          <SmallArrowIcon sx={{ width: '7px', ml: '4px' }} />
+        </ButtonBase>
+        {children}
+      </div>
+    </div>
+  );
+};