regen-network · wgardiner · Nov 5, 2024 · Oct 30, 2024 · Oct 31, 2024 · Oct 31, 2024
diff --git a/web-components/src/components/cards/TebuCard/TebuCard.Duration.tsx b/web-components/src/components/cards/TebuCard/TebuCard.Duration.tsx
@@ -31,8 +31,8 @@ const TebuCardDuration: React.FC<TebuCardDurationProps> = ({
   return (
     <div className="mb-[10px]">
       <div className="text-[16px] font-[700] mb-[10px]">{title}</div>
-      <div className="relative w-[265px]">
-        <div className="mb-[12px] relative w-full h-[14px] bg-bc-neutral-200 rounded-full">
+      <div className="relative">
+        <div className="mb-[12px] relative h-[14px] bg-bc-neutral-200 rounded-full">
           <div
             className={cn('absolute h-full rounded-tl-full rounded-bl-full', {
               'rounded-tr-full rounded-br-full': duration >= maximumValue,

diff --git a/web-components/src/components/cards/TebuCard/TebuCard.tsx b/web-components/src/components/cards/TebuCard/TebuCard.tsx
@@ -1,10 +1,10 @@
 import Box from '@mui/material/Box';
+import cn from 'classnames';
 
 import Card from '../../cards/Card';
 import InfoIconOutlined from '../../icons/InfoIconOutlined';
 import InfoTooltip from '../../tooltip/InfoTooltip';
-import { Body, Label } from '../../typography';
-import cn from 'classnames'
+import { Body } from '../../typography';
 
 export interface TebuCardProps {
   className?: string;
@@ -25,9 +25,14 @@ export default function TebuCard({
   headerTooltip,
 }: TebuCardProps): JSX.Element {
   return (
-    <Card className={cn('text-sc-text-header w-[310px]', className)}>
-      <Box className="flex items-center gap-[10px] pl-[20px] pr-[5px] py-[15px] text-[12px] bg-sc-card-standard-header-background">
-        <Body className="font-montserrat tracking-[1px] text-[12px] font-montserrat uppercase font-extrabold text-sc-text-sub-header">
+    <Card
+      className={cn(
+        'text-sc-text-header w-full min-w-[250px] max-w-[330px] sm:max-w-[310px] font-montserrat',
+        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">
+        <Body className="tracking-[1px] text-[11px] sm:text-[12px] uppercase font-extrabold text-sc-text-sub-header">
           {header}
         </Body>
         {headerTooltip && (
@@ -40,12 +45,12 @@ export default function TebuCard({
       </Box>
       <Box className="p-[20px]">
         {children}
-        <Box className="flex flex-col  items-end font-mont">
+        <Box className="flex flex-col items-end">
           {footerLabels?.length &&
             footerLabels.map(({ label, value }) => (
               <Box className="flex items-center" key={label}>
-                <Body className="font-montserrat text-[12px]">{label}</Body>
-                <Body className="font-montserrat font-bold ml-3 text-[12px]">{value}</Body>
+                <Body className="text-[12px]">{label}</Body>
+                <Body className="font-bold ml-3 text-[12px]">{value}</Body>
               </Box>
             ))}
         </Box>

diff --git a/web-components/src/components/cards/TebuCard/index.ts b/web-components/src/components/cards/TebuCard/index.ts
@@ -1 +1 @@
-export { default } from './TebuCard';
+export { default } from './TebuCard';
diff --git a/web-components/src/components/icons/CreditsTradeableAlt.tsx b/web-components/src/components/icons/CreditsTradeableAlt.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import CreditsIcon from './CreditsIcon';
+
+const CreditsTradeableAlt: React.FC = () => {
+  return (
+    <div className="text-sc-icon-standard-success bg-sc-icon-standard-background rounded-full h-[24px] w-[24px] flex items-center justify-center">
+      <CreditsIcon />
+    </div>
+  );
+};
+
+export default CreditsTradeableAlt;
diff --git a/web-components/src/components/icons/InfoIconOutlined.tsx b/web-components/src/components/icons/InfoIconOutlined.tsx
@@ -22,16 +22,22 @@ function InfoIconOutlined({ className, sx = [] }: IconProps): JSX.Element {
         cx="12.5"
         cy="12.9669"
         r="12"
-        fill={theme.palette.primary.main}
-        stroke={theme.palette.secondary.main}
+        style={{
+          fill: 'rgba(var(--sc-tooltip-fill) / 1)',
+          stroke: 'rgba(var(--sc-tooltip-outline) / 1)',
+        }}
       />
       <path
         d="M13.172 7.6C13.172 7.408 13.0973 7.22667 12.948 7.056C12.7773 6.90667 12.596 6.832 12.404 6.832C12.212 6.832 12.0307 6.90667 11.86 7.056C11.7107 7.22667 11.636 7.41333 11.636 7.616C11.636 7.808 11.7107 7.98933 11.86 8.16C12.0307 8.30933 12.212 8.384 12.404 8.384C12.596 8.384 12.7773 8.30933 12.948 8.16C13.0973 7.98933 13.172 7.80267 13.172 7.6ZM14.468 18.128V17.152H13.172V10.304H10.756V11.28H12.084V17.408H12.1V18.128H14.468Z"
-        fill={theme.palette.secondary.main}
+        style={{
+          fill: 'rgba(var(--sc-tooltip-outline) / 1)',
+        }}
       />
       <path
         d="M12.948 7.056L13.249 6.7926L13.2315 6.77253L13.2114 6.75497L12.948 7.056ZM11.86 7.056L11.5966 6.75497L11.5765 6.77253L11.559 6.7926L11.86 7.056ZM11.86 8.16L11.559 8.4234L11.5765 8.44347L11.5966 8.46103L11.86 8.16ZM12.948 8.16L13.2114 8.46103L13.2315 8.44347L13.249 8.4234L12.948 8.16ZM14.468 18.128V18.528H14.868V18.128H14.468ZM14.468 17.152H14.868V16.752H14.468V17.152ZM13.172 17.152H12.772V17.552H13.172V17.152ZM13.172 10.304H13.572V9.904H13.172V10.304ZM10.756 10.304V9.904H10.356V10.304H10.756ZM10.756 11.28H10.356V11.68H10.756V11.28ZM12.084 11.28H12.484V10.88H12.084V11.28ZM12.084 17.408H11.684V17.808H12.084V17.408ZM12.1 17.408H12.5V17.008H12.1V17.408ZM12.1 18.128H11.7V18.528H12.1V18.128ZM13.572 7.6C13.572 7.29408 13.45 7.02225 13.249 6.7926L12.647 7.3194C12.7447 7.43108 12.772 7.52192 12.772 7.6H13.572ZM13.2114 6.75497C12.9817 6.55402 12.7099 6.432 12.404 6.432V7.232C12.4821 7.232 12.5729 7.25931 12.6846 7.35703L13.2114 6.75497ZM12.404 6.432C12.0981 6.432 11.8263 6.55402 11.5966 6.75497L12.1234 7.35703C12.2351 7.25931 12.3259 7.232 12.404 7.232V6.432ZM11.559 6.7926C11.354 7.02688 11.236 7.30476 11.236 7.616H12.036C12.036 7.5219 12.0674 7.42645 12.161 7.3194L11.559 6.7926ZM11.236 7.616C11.236 7.92192 11.358 8.19374 11.559 8.4234L12.161 7.8966C12.0633 7.78492 12.036 7.69408 12.036 7.616H11.236ZM11.5966 8.46103C11.8263 8.66198 12.0981 8.784 12.404 8.784V7.984C12.3259 7.984 12.2351 7.95669 12.1234 7.85897L11.5966 8.46103ZM12.404 8.784C12.7099 8.784 12.9817 8.66198 13.2114 8.46103L12.6846 7.85897C12.5729 7.95669 12.4821 7.984 12.404 7.984V8.784ZM13.249 8.4234C13.454 8.18911 13.572 7.91123 13.572 7.6H12.772C12.772 7.6941 12.7406 7.78955 12.647 7.8966L13.249 8.4234ZM14.868 18.128V17.152H14.068V18.128H14.868ZM14.468 16.752H13.172V17.552H14.468V16.752ZM13.572 17.152V10.304H12.772V17.152H13.572ZM13.172 9.904H10.756V10.704H13.172V9.904ZM10.356 10.304V11.28H11.156V10.304H10.356ZM10.756 11.68H12.084V10.88H10.756V11.68ZM11.684 11.28V17.408H12.484V11.28H11.684ZM12.084 17.808H12.1V17.008H12.084V17.808ZM11.7 17.408V18.128H12.5V17.408H11.7ZM12.1 18.528H14.468V17.728H12.1V18.528Z"
-        fill={theme.palette.secondary.main}
+        style={{
+          fill: 'rgba(var(--sc-tooltip-outline) / 1)',
+        }}
       />
     </SvgIcon>
   );

diff --git a/web-components/src/components/icons/terrasos/terassosIcons.stories.tsx b/web-components/src/components/icons/terrasos/terassosIcons.stories.tsx
@@ -79,7 +79,7 @@ export const allIcons = (): JSX.Element => (
       {(Object.keys(Level) as Level[]).map(level => (
         <LabeledIcon
           label={level}
-          icon={<EcologicalConnectivityLevelIcon level={level} key={level} />}
+          icon={<EcologicalConnectivityLevelIcon type={level} key={level} />}
         />
       ))}
     </div>

diff --git a/web-components/src/components/text-layouts/LabeledDetail.tsx b/web-components/src/components/text-layouts/LabeledDetail.tsx
@@ -16,6 +16,7 @@ export const LabeledDetail: React.FC<
     sxLabel?: SxProps<Theme>;
     sxChildren?: SxProps<Theme>;
     labelSize?: LabelSize;
+    tooltipClassName?: string;
   }>
 > = ({
   label,
@@ -25,6 +26,7 @@ export const LabeledDetail: React.FC<
   sx = [],
   sxLabel = [],
   sxChildren = [],
+  tooltipClassName,
 }) => (
   <Flex col sx={{ gap: 2, ...sx }}>
     <Flex alignItems="center">
@@ -42,7 +44,12 @@ export const LabeledDetail: React.FC<
         {label}
       </Label>
       {tooltipLabel && (
-        <InfoTooltipWithIcon title={tooltipLabel} sx={{ ml: 2 }} outlined />
+        <InfoTooltipWithIcon
+          title={tooltipLabel}
+          sx={{ ml: 2 }}
+          outlined
+          className={tooltipClassName}
+        />
       )}
     </Flex>
     <Flex alignItems="center" sx={sxChildren}>

diff --git a/web-components/src/components/text-layouts/LabeledValue.tsx b/web-components/src/components/text-layouts/LabeledValue.tsx
@@ -20,6 +20,7 @@ type Props = {
     maximumFractionDigits?: number;
   };
   formatDateOption?: string;
+  tooltipClassName?: string;
 };
 
 /** Grey label over a rounded, formatted number */
@@ -34,6 +35,7 @@ export function LabeledValue({
   formatDateOption,
   formatNumberOptions = {},
   children,
+  tooltipClassName,
 }: React.PropsWithChildren<Props>): JSX.Element {
   return (
     <LabeledDetail
@@ -44,6 +46,7 @@ export function LabeledValue({
       }}
       sxLabel={{ width: 'fit-content' }}
       sxChildren={{ height: '100%' }}
+      tooltipClassName={tooltipClassName}
     >
       {icon && <Box sx={{ mr: 2.5, display: 'inline-flex' }}>{icon}</Box>}
       <Title
@@ -60,7 +63,12 @@ export function LabeledValue({
       {children}
       {badgeLabel && <GradientBadge label={badgeLabel} />}
       {tooltipNumber && (
-        <InfoTooltipWithIcon title={tooltipNumber} sx={{ ml: 1 }} outlined />
+        <InfoTooltipWithIcon
+          title={tooltipNumber}
+          sx={{ ml: 1 }}
+          outlined
+          className={tooltipClassName}
+        />
       )}
     </LabeledDetail>
   );

diff --git a/web-marketplace/public/svg/tebu-badge.svg b/web-marketplace/public/svg/tebu-badge.svg
diff --git a/web-marketplace/src/components/molecules/ProjectBatchTotals/ProjectBatchTotals.tsx b/web-marketplace/src/components/molecules/ProjectBatchTotals/ProjectBatchTotals.tsx
@@ -7,8 +7,11 @@ import { quantityFormatNumberOptions } from 'config/decimals';
 import CreditsIssuedIcon from 'web-components/src/components/icons/CreditsIssued';
 import CreditsRetiredIcon from 'web-components/src/components/icons/CreditsRetired';
 import CreditsTradeableIcon from 'web-components/src/components/icons/CreditsTradeable';
+import CreditsTradeableAltIcon from 'web-components/src/components/icons/CreditsTradeableAlt';
 import { LabeledValue } from 'web-components/src/components/text-layouts';
 
+import { IS_TERRASOS } from 'lib/env';
+
 import { ProjectWithOrderData } from 'pages/Projects/AllProjects/AllProjects.types';
 import { getCreditsTooltip } from 'pages/Projects/AllProjects/utils/getCreditsTooltip';
 import { getIsSoldOut } from 'pages/Projects/AllProjects/utils/getIsSoldOut';
@@ -44,6 +47,8 @@ export function ProjectBatchTotals({
     project: projectWithOrderData,
     soldOutProjectsIds,
   });
+
+  const tooltipClassName = IS_TERRASOS ? 'w-[17px] h-[17px]' : '';
   return (
     <Grid
       container
@@ -69,11 +74,14 @@ export function ProjectBatchTotals({
             maximumFractionDigits: MAX_FRACTION_DIGITS_PROJECT_CREDITS,
           }}
           icon={<CreditsIssuedIcon />}
+          tooltipClassName={tooltipClassName}
         />
       </GridItem>
       <GridItem>
         <LabeledValue
-          label={_(msg`Credits Tradable`)}
+          label={
+            IS_TERRASOS ? _(msg`Credits Available`) : _(msg`Credits Tradable`)
+          }
           tooltipLabel={_(TRADEABLE_CREDITS_TOOLTIP)}
           tooltipNumber={getCreditsTooltip({
             isSoldOut,
@@ -86,7 +94,8 @@ export function ProjectBatchTotals({
             ...quantityFormatNumberOptions,
             maximumFractionDigits: MAX_FRACTION_DIGITS_PROJECT_CREDITS,
           }}
-          icon={<CreditsTradeableIcon />}
+          icon={IS_TERRASOS ? <CreditsTradeableAltIcon /> : <CreditsTradeableIcon />}
+          tooltipClassName={tooltipClassName}
         />
       </GridItem>
       <GridItem>
@@ -99,6 +108,7 @@ export function ProjectBatchTotals({
             maximumFractionDigits: MAX_FRACTION_DIGITS_PROJECT_CREDITS,
           }}
           icon={<CreditsRetiredIcon />}
+          tooltipClassName={tooltipClassName}
         />
       </GridItem>
     </Grid>

diff --git a/web-marketplace/src/components/organisms/ProjectTopSection/ProjectTopSection.tsx b/web-marketplace/src/components/organisms/ProjectTopSection/ProjectTopSection.tsx
@@ -37,6 +37,7 @@ import {
   MAPBOX_TOKEN,
 } from 'components/templates/ProjectDetails/ProjectDetails.config';
 import { Prefinance } from 'components/templates/ProjectDetails/ProjectDetails.Prefinance';
+import TerrasosCreditsInfo from 'components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo';
 import { useTags } from 'hooks/useTags';
 
 import { ProjectBatchTotals } from '../../molecules';
@@ -55,6 +56,8 @@ import {
   parseProjectPageMetadata,
 } from './ProjectTopSection.utils';
 
+import { IS_TERRASOS } from 'lib/env';
+
 function ProjectTopSection({
   offChainProject,
   onChainProject,
@@ -199,6 +202,9 @@ function ProjectTopSection({
     !!ratingsAndCertificationsData ||
     !!otcCard;
 
+  const isTerrasosProjectPage =
+    projectPageMetadata?.['@type'] === 'TerrasosProjectInfo';
+
   return (
     <Section classes={{ root: classes.section }}>
       <Grid
@@ -271,7 +277,7 @@ function ProjectTopSection({
             program={program}
           />
           <Box>
-            {onChainProjectId && batchData?.totals && (
+            {!IS_TERRASOS && onChainProjectId && batchData?.totals && (
               <ProjectBatchTotals
                 projectWithOrderData={projectWithOrderData}
                 soldOutProjectsIds={soldOutProjectsIds}
@@ -283,6 +289,26 @@ function ProjectTopSection({
               />
             )}
           </Box>
+          {onChainProjectId && isTerrasosProjectPage && projectPageMetadata && (
+            <TerrasosCreditsInfo
+              _={_}
+              isOnChain={!!onChainProjectId}
+              projectPageMetadata={projectPageMetadata}
+              projectBatchTotals={
+                onChainProjectId && batchData?.totals ? (
+                  <ProjectBatchTotals
+                    projectWithOrderData={projectWithOrderData}
+                    soldOutProjectsIds={soldOutProjectsIds}
+                    totals={batchData.totals}
+                    sx={{
+                      mt: { xs: '30px', sm: '50px' },
+                      mb: '30px',
+                    }}
+                  />
+                ) : undefined
+              }
+            />
+          )}
           {quote && (
             <div>
               <Title

diff --git a/...nents/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.ComplianceInfo.tsx b/...nents/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.ComplianceInfo.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Box } from '@mui/material';
+
+const ComplianceInfo: React.FC = () => {
+  return (
+    <Box
+      sx={{
+        p: 8,
+        backgroundColor: 'primary.main',
+        border: '1px solid',
+        borderColor: 'info.light',
+        borderRadius: '0 0 8px 8px',
+      }}
+    >
+      <h1>Compliance Info</h1>
+    </Box>
+  );
+};
+
+export default ComplianceInfo;