refactor: currency component and intro modal organization

Vizzuality · Jan 9, 2025 · 4b3fb93 · 4b3fb93
1 parent b6707c6
commit 4b3fb93
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 104 deletions.
diff --git a/client/src/components/ui/currency.tsx b/client/src/components/ui/currency.tsx
@@ -39,7 +39,7 @@ const Currency: FC<CurrencyProps> = ({
           "inline-block": true,
           "first-letter:align-top first-letter:text-xs first-letter:tracking-[0.1rem] first-letter:text-muted-foreground":
             !plainSymbol,
-          "first-letter:pr-1": plainSymbol,
+          "first-letter:pr-0.5": plainSymbol,
         },
         className,
       )}

diff --git a/client/src/components/ui/graph.tsx b/client/src/components/ui/graph.tsx
@@ -1,6 +1,6 @@
 import { FC } from "react";
 
-import { renderCurrency } from "@/lib/format";
+import Currency from "@/components/ui/currency";
 
 interface GraphProps {
   /** The total value that represents 100% of the graph */
@@ -43,14 +43,14 @@ const Graph: FC<GraphProps> = ({ total, leftover, segments }) => {
           >
             <div className="absolute bottom-1 left-0 right-0 mx-1">
               <div className="rounded-md bg-white/30 px-1.5 py-0.5 text-center text-xs font-semibold text-secondary-foreground">
-                {renderCurrency(
-                  total,
-                  {
+                <Currency
+                  value={total}
+                  options={{
                     notation: "compact",
                     maximumFractionDigits: 1,
-                  },
-                  "first-letter:text-secondary-foreground",
-                )}
+                  }}
+                  plainSymbol
+                />
               </div>
             </div>
           </div>
@@ -66,14 +66,14 @@ const Graph: FC<GraphProps> = ({ total, leftover, segments }) => {
               >
                 <div className="absolute bottom-1 left-0 right-0 mx-1">
                   <div className="rounded-md bg-white/30 px-1.5 py-0.5 text-center text-xs font-semibold text-secondary-foreground">
-                    {renderCurrency(
-                      value,
-                      {
+                    <Currency
+                      value={value}
+                      options={{
                         notation: "compact",
                         maximumFractionDigits: 1,
-                      },
-                      "first-letter:text-secondary-foreground",
-                    )}
+                      }}
+                      plainSymbol
+                    />
                   </div>
                 </div>
               </div>
@@ -104,14 +104,14 @@ const Graph: FC<GraphProps> = ({ total, leftover, segments }) => {
           >
             <div className="absolute bottom-1 left-0 right-0 mx-1">
               <div className="rounded-sm bg-white/50 px-1.5 py-0.5 text-center text-xs font-semibold text-big-stone-950">
-                {renderCurrency(
-                  value,
-                  {
+                <Currency
+                  value={value}
+                  options={{
                     notation: "compact",
                     maximumFractionDigits: 1,
-                  },
-                  "first-letter:text-secondary-foreground",
-                )}
+                  }}
+                  plainSymbol
+                />
               </div>
             </div>
           </div>
@@ -173,7 +173,7 @@ const GraphWithLegend: FC<GraphWithLegendProps> = ({
       <div className="flex max-w-[148px] flex-1 flex-col justify-between">
         <div>
           <span className="text-xl font-normal">
-            {renderCurrency(leftover || total)}
+            <Currency value={leftover || total} />
           </span>
         </div>
         <GraphLegend

diff --git a/client/src/containers/intro-modal/index.tsx b/client/src/containers/intro-modal/index.tsx
@@ -2,13 +2,10 @@
 import { useCallback, useState } from "react";
 
 import {
-  ClipboardPenIcon,
-  FileQuestionIcon,
-  LayoutDashboardIcon,
-  UserIcon,
-} from "lucide-react";
-
-import { introModalManager } from "@/lib/utils";
+  introItems,
+  setHideIntroModal,
+  showIntroModal,
+} from "@/containers/intro-modal/utils";
 
 import { Button } from "@/components/ui/button";
 import { CheckboxWrapper } from "@/components/ui/checkbox";
@@ -21,41 +18,15 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 
-const introItems = [
-  {
-    title: "Project Overview",
-    description:
-      "Explore and compare over 400 project scenarios with ease. Apply filters for location, ecosystem type, activity, cost, abatement potential and project size. The global map visualizes project blue carbon potential across 9 countries, enabling comparisons based on cost-to-abatement ratios. Additionally, use the comparison table for detailed cost and score analyses, and select a project for additional details.",
-    icon: LayoutDashboardIcon,
-  },
-  {
-    title: "Create custom projects",
-    description:
-      "Design custom scenarios by modifying default parameters and exploring the resulting data in detail. Save your projects to revisit them anytime and quickly compare all the scenarios you’ve created.",
-    icon: ClipboardPenIcon,
-  },
-  {
-    title: "Methodology",
-    description:
-      "Explore for detailed information on model assumptions, estimations, and data sources.",
-    icon: FileQuestionIcon,
-  },
-  {
-    title: "Profile",
-    description: "Access information about your personal account.",
-    icon: UserIcon,
-  },
-];
-
 const IntroModal = () => {
-  const [isOpen, setIsOpen] = useState(introModalManager.showIntroModal());
+  const [isOpen, setIsOpen] = useState(showIntroModal());
   const [dontShowAgain, setDontShowAgain] = useState(false);
   const handleClose = useCallback(
     (open = false) => {
       setIsOpen(open);
 
       if (dontShowAgain) {
-        introModalManager.setHideIntroModal();
+        setHideIntroModal();
       }
     },
     [dontShowAgain],

diff --git a/client/src/containers/intro-modal/utils.ts b/client/src/containers/intro-modal/utils.ts
@@ -0,0 +1,48 @@
+import {
+  ClipboardPenIcon,
+  FileQuestionIcon,
+  LayoutDashboardIcon,
+  UserIcon,
+} from "lucide-react";
+
+const isServer = typeof window === "undefined";
+
+export const introItems = [
+  {
+    title: "Project Overview",
+    description:
+      "Explore and compare over 400 project scenarios with ease. Apply filters for location, ecosystem type, activity, cost, abatement potential and project size. The global map visualizes project blue carbon potential across 9 countries, enabling comparisons based on cost-to-abatement ratios. Additionally, use the comparison table for detailed cost and score analyses, and select a project for additional details.",
+    icon: LayoutDashboardIcon,
+  },
+  {
+    title: "Create custom projects",
+    description:
+      "Design custom scenarios by modifying default parameters and exploring the resulting data in detail. Save your projects to revisit them anytime and quickly compare all the scenarios you’ve created.",
+    icon: ClipboardPenIcon,
+  },
+  {
+    title: "Methodology",
+    description:
+      "Explore for detailed information on model assumptions, estimations, and data sources.",
+    icon: FileQuestionIcon,
+  },
+  {
+    title: "Profile",
+    description: "Access information about your personal account.",
+    icon: UserIcon,
+  },
+];
+
+export const showIntroModal = (): boolean => {
+  if (isServer) return false;
+
+  return (
+    !!process.env.HIDE_INTRO_MODAL || !localStorage.getItem("hideIntroModal")
+  );
+};
+
+export const setHideIntroModal = (): void => {
+  if (isServer) return;
+
+  localStorage.setItem("hideIntroModal", "true");
+};
diff --git a/client/src/containers/overview/map/popup/index.tsx b/client/src/containers/overview/map/popup/index.tsx
@@ -1,11 +1,12 @@
 import { useAtomValue } from "jotai";
 
-import { renderCurrency } from "@/lib/format";
+import { formatNumber } from "@/lib/format";
 import { cn } from "@/lib/utils";
 
 import { popupAtom } from "@/app/(overview)/store";
 
 import MapPopup from "@/components/map/popup";
+import Currency from "@/components/ui/currency";
 
 const HEADER_CLASSES = "py-0.5 text-left font-normal text-muted-foreground";
 const CELL_CLASSES = "py-0.5 font-semibold";
@@ -30,16 +31,18 @@ export default function CostAbatementPopup() {
         <tbody>
           <tr>
             <td className={cn(CELL_CLASSES, "pr-2")}>
-              {renderCurrency(popup?.features?.[0]?.properties?.cost)}
+              <Currency value={popup?.features?.[0]?.properties?.cost} />
             </td>
             <td className={cn(CELL_CLASSES, "px-2")}>
-              {popup?.features?.[0]?.properties?.abatementPotential}
+              {formatNumber(
+                popup?.features?.[0]?.properties?.abatementPotential,
+              )}
             </td>
           </tr>
         </tbody>
       </table>
       <p className="mt-2 text-xs text-muted-foreground">
-        Values for the SUM of all projects.
+        Values for the SUM of all project combinations.
       </p>
     </MapPopup>
   );

diff --git a/client/src/containers/overview/table/view/overview/columns.tsx b/client/src/containers/overview/table/view/overview/columns.tsx
@@ -85,7 +85,7 @@ export const columns = (filters: z.infer<typeof filtersSchema>) => [
     filters.costRangeSelector === "npv" ? "costPerTCO2eNPV" : "costPerTCO2e",
     {
       enableSorting: true,
-      header: () => <HeaderText>Cost $(USD)/tCo2</HeaderText>,
+      header: () => <HeaderText>Cost $(USD)/tCO2e</HeaderText>,
       cell: (props) => {
         const value = props.getValue();
         if (value === null || value === undefined) {

diff --git a/client/src/lib/format.tsx b/client/src/lib/format.tsx
@@ -1,5 +1,3 @@
-import { cn } from "@/lib/utils";
-
 export const formatCurrency = (
   value: number,
   options: Intl.NumberFormatOptions = {},
@@ -23,23 +21,6 @@ export const formatNumber = (
   }).format(value);
 };
 
-export function renderCurrency(
-  value: number,
-  options: Intl.NumberFormatOptions = {},
-  className?: HTMLSpanElement["className"],
-) {
-  return (
-    <span
-      className={cn(
-        "inline-block first-letter:align-top first-letter:text-xs first-letter:tracking-[0.1rem] first-letter:text-muted-foreground",
-        className,
-      )}
-    >
-      {formatCurrency(value, options)}
-    </span>
-  );
-}
-
 /**
  * Converts a large numeric value into a compact format with an "M" suffix
  * representing millions.

diff --git a/client/src/lib/utils.ts b/client/src/lib/utils.ts
@@ -43,30 +43,6 @@ export const parseTableData = <
     value: formatCurrency(data[key as K], { maximumFractionDigits: 0 }),
   }));
 };
-class IntroModalManager {
-  private static instance: IntroModalManager;
-  private isServer: boolean = typeof window === "undefined";
-
-  public static getInstance(): IntroModalManager {
-    if (!IntroModalManager.instance) {
-      IntroModalManager.instance = new IntroModalManager();
-    }
-    return IntroModalManager.instance;
-  }
-
-  public showIntroModal(): boolean {
-    if (this.isServer) return false;
-    return (
-      !!process.env.HIDE_INTRO_MODAL || !localStorage.getItem("hideIntroModal")
-    );
-  }
-
-  public setHideIntroModal(): void {
-    if (this.isServer) return;
-    localStorage.setItem("hideIntroModal", "true");
-  }
-}
-export const introModalManager = IntroModalManager.getInstance();
 
 const PRIVATE_PAGES = /^(\/profile|\/my-projects)/;
 export const isPrivatePath = (pathname: string) => {