fix: APP-502 tebu factors small UI issues (#2563)

regen-network · Dec 3, 2024 · f97c1c7 · f97c1c7
1 parent dacdc85
commit f97c1c7
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 81 deletions.
diff --git a/web-components/src/components/cards/TebuCard/TebuCard.Duration.stories.tsx b/web-components/src/components/cards/TebuCard/TebuCard.Duration.stories.tsx
@@ -19,8 +19,8 @@ DurationStory.args = {
       title="20 year project duration"
       minimumValue={20}
       maximumValue={30}
-      minimumLabel="minimum"
-      durationUnitLabel="years"
+      minDurationLabel="20 years minimum"
+      maxDurationLabel="30 years"
       duration={20}
       tooltip="Duration Tooltip"
     />
@@ -38,22 +38,29 @@ const durationValues = [
     duration: 20,
     title: '20 year project duration',
     maximumValue: 30,
+    minDurationLabel: '20 years minimum',
+    maxDurationLabel: '30 years',
   },
   {
     duration: 25,
     title: '25 year project duration',
     maximumValue: 30,
+    minDurationLabel: '20 years minimum',
+    maxDurationLabel: '30 years',
   },
   {
     duration: 50,
     title: '50 year project duration',
     maximumValue: 30,
+    minDurationLabel: '20 years minimum',
+    maxDurationLabel: '30 years',
   },
   {
     duration: 50,
     title: '50 year project duration',
     maximumValue: 50,
-    maximumPrefix: '>',
+    minDurationLabel: '20 years minimum',
+    maxDurationLabel: '>50 years',
   },
 ];
 
@@ -68,10 +75,7 @@ DurationStory.decorators = [
             children={
               <Duration
                 {...(DurationStory.args?.children?.props as any)}
-                title={values.title}
-                duration={values.duration}
-                maximumValue={values.maximumValue}
-                maximumPrefix={values.maximumPrefix}
+                {...values}
               />
             }
           />

diff --git a/web-components/src/components/cards/TebuCard/TebuCard.Duration.tsx b/web-components/src/components/cards/TebuCard/TebuCard.Duration.tsx
@@ -10,23 +10,19 @@ interface TebuCardDurationProps {
   title: string;
   minimumValue: number;
   maximumValue: number;
-  minimumLabel: string;
-  durationUnitLabel: string;
   tooltip?: string;
-  maximumPrefix?: string;
+  minDurationLabel: string;
+  maxDurationLabel: string;
 }
 
-
-
 const TebuCardDuration: React.FC<TebuCardDurationProps> = ({
   title,
   duration,
   minimumValue,
   maximumValue,
-  minimumLabel,
-  durationUnitLabel,
   tooltip,
-  maximumPrefix,
+  minDurationLabel,
+  maxDurationLabel,
 }) => {
   return (
     <div className="mb-[10px]">
@@ -56,21 +52,15 @@ const TebuCardDuration: React.FC<TebuCardDurationProps> = ({
         </div>
         <div className="relative w-full h-[2em] top-0">
           <div
-            className="absolute text-[12px] text-right"
+            className="absolute text-[12px] text-right max-w-[90px]"
             style={{
               right: `${(1 - minimumValue / maximumValue) * 100}%`,
             }}
           >
-            <div>
-              {minimumValue} {durationUnitLabel}
-            </div>
-            <div>{minimumLabel}</div>
+            {minDurationLabel}
           </div>
           <div className="absolute text-[12px] text-right right-0">
-            <div>
-              {maximumPrefix}
-              {maximumValue} {durationUnitLabel}
-            </div>
+            <div>{maxDurationLabel}</div>
             <div>
               {tooltip && (
                 <InfoTooltip

diff --git a/web-marketplace/src/clients/terrasos/Terrasos.tailwind.css b/web-marketplace/src/clients/terrasos/Terrasos.tailwind.css
@@ -55,6 +55,13 @@
     --bc-red-300: 242 181 168;
     --bc-red-200: 248 218 212;
     --bc-red-100: 248 238 236;
+    --bc-orange-700: 122 64 11;
+    --bc-orange-600: 190 91 1;
+    --bc-orange-500: 224 119 22;
+    --bc-orange-400: 230 158 92;
+    --bc-orange-300: 255 207 152;
+    --bc-orange-200: 255 236 213;
+    --bc-orange-100: 255 246 236;
     --bc-green-700: 15 90 38;
     --bc-green-600: 36 136 70;
     --bc-green-500: 73 175 109;

diff --git a/...src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx b/...src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx
@@ -1,5 +1,5 @@
 import { MessageDescriptor } from '@lingui/core';
-import { msg } from '@lingui/macro';
+import { msg, plural } from '@lingui/macro';
 
 import TebuCard from 'web-components/src/components/cards/TebuCard';
 import AreaActionsBody from 'web-components/src/components/cards/TebuCard/TebuCard.AreaActionsBody';
@@ -95,6 +95,7 @@ export function getDurationCard(
   const { factor } =
     durationFactors.find(({ duration }) => years >= duration) ||
     durationFactors[durationFactors.length - 1];
+  const maxDurationPrefix = maximumDuration === 50 ? '>' : '';
 
   return (
     <TebuCard
@@ -108,11 +109,20 @@ export function getDurationCard(
       ]}
     >
       <DurationBody
-        title={_(msg`${years} year project duration`)}
+        title={plural(years, {
+          one: `${years} year project duration`,
+          other: `${years} year project duration`,
+        })}
+        minDurationLabel={plural(minimumDuration, {
+          one: `${minimumDuration} year minimum`,
+          other: `${minimumDuration} years minimum`,
+        })}
+        maxDurationLabel={plural(minimumDuration, {
+          one: `${maxDurationPrefix}${maximumDuration} year`,
+          other: `${maxDurationPrefix}${maximumDuration} years`,
+        })}
         minimumValue={minimumDuration}
         maximumValue={maximumDuration}
-        minimumLabel="minimum"
-        durationUnitLabel="years"
         duration={years}
       />
     </TebuCard>

diff --git a/web-marketplace/src/lib/i18n/locales/en.po b/web-marketplace/src/lib/i18n/locales/en.po
@@ -75,6 +75,14 @@ msgstr ""
 msgid "{from}–{displayedTo} of more than {to}"
 msgstr ""
 
+#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:120
+msgid "{minimumDuration, plural, one {{maxDurationPrefix}{maximumDuration} year} other {{maxDurationPrefix}{maximumDuration} years}}"
+msgstr ""
+
+#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:116
+msgid "{minimumDuration, plural, one {{minimumDuration} year minimum} other {{minimumDuration} years minimum}}"
+msgstr ""
+
 #: src/components/organisms/MediaForm/MediaFormPhotos.tsx:329
 msgid "{remainingCaptionCharacters, plural, one {{remainingCaptionCharacters} character remaining} other {{remainingCaptionCharacters} characters remaining}}"
 msgstr ""
@@ -101,10 +109,14 @@ msgstr ""
 msgid "{remainingTitleCharacters, plural, one {{remainingTitleCharacters} character remaining} other {{remainingTitleCharacters} characters remaining}}"
 msgstr ""
 
-#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:111
-msgid "{years} year project duration"
+#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:112
+msgid "{years, plural, one {{years} year project duration} other {{years} year project duration}}"
 msgstr ""
 
+#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:111
+#~ msgid "{years, plural, one {year project duration} other {year project duration}}"
+#~ msgstr ""
+
 #: src/components/molecules/OrderSummaryCard/OrderSummaryCard.Content.tsx:106
 #: src/components/organisms/Order/Order.Summary.tsx:85
 msgid "# credits"
@@ -577,7 +589,7 @@ msgstr ""
 msgid "Are you sure you want to discard your changes?"
 msgstr ""
 
-#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:141
+#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:151
 msgid "Area Actions"
 msgstr ""
 
@@ -1880,8 +1892,8 @@ msgstr ""
 
 #: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:39
 #: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:71
-#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:105
-#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:182
+#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:106
+#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:192
 msgid "Factor:"
 msgstr ""
 
@@ -2948,11 +2960,11 @@ msgstr ""
 msgid "Premontane humid forest"
 msgstr ""
 
-#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:159
+#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:169
 msgid "Preservation"
 msgstr ""
 
-#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:151
+#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:161
 msgid "Preservation Factor:"
 msgstr ""
 
@@ -3143,7 +3155,7 @@ msgstr ""
 msgid "Project documentation"
 msgstr ""
 
-#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:101
+#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:102
 msgid "Project Duration"
 msgstr ""
 
@@ -3251,7 +3263,7 @@ msgstr ""
 msgid "Projects"
 msgstr ""
 
-#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:143
+#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:153
 msgid "Projects must have a duration of at least 20 years to ensure demonstrable and quantifiable results in biodiversity. Tebu promotes projects that last longer, ensuring long term ecological processes."
 msgstr ""
 
@@ -3441,11 +3453,11 @@ msgstr ""
 msgid "Resources for Getting Started"
 msgstr ""
 
-#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:160
+#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:170
 msgid "Restoration"
 msgstr ""
 
-#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:147
+#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:157
 msgid "Restoration Factor:"
 msgstr ""
 
@@ -3793,7 +3805,7 @@ msgstr ""
 msgid "Social Accounts"
 msgstr ""
 
-#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:176
+#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:186
 msgid "Social and Cultural Index"
 msgstr ""
 
@@ -4051,7 +4063,7 @@ msgstr ""
 msgid "The individual or organization that is in charge of managing the project and will appear on the project page."
 msgstr ""
 
-#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:178
+#: src/components/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.utils.tsx:188
 msgid "The integration of local communities' knowledge, social structures, and equitable participation to ensure both ecosystem conservation and community benefits."
 msgstr ""