[TM-1568] change text for logged users

src/components/extensive/BlurContainer/BlurContainer.tsx

@@ -1,17 +1,22 @@
+import { useT } from "@transifex/react";
 import React from "react";
 import { When } from "react-if";
 import { twMerge as tw } from "tailwind-merge";
 
 import Text from "@/components/elements/Text/Text";
+import { TEXT_TYPES } from "@/constants/dashboardConsts";
 
 export interface BlurContainerProps {
   isBlur: boolean;
-  textInformation?: string | React.ReactNode;
+  textType?: string;
   children: React.ReactNode;
   className?: string;
+  logout?: () => void;
 }
 
-const BlurContainer = ({ isBlur, textInformation, children, className, ...props }: BlurContainerProps) => {
+const BlurContainer = ({ isBlur, textType, children, className, logout }: BlurContainerProps) => {
+  const t = useT();
+
   if (!isBlur) {
     return <>{children}</>;
   }
@@ -31,16 +36,46 @@ const BlurContainer = ({ isBlur, textInformation, children, className, ...props
     </>
   );
 
+  const ProjectAccessText = () => (
+    <>
+      <button onClick={logout} className="text-12-semibold underline">
+        Sign in
+      </button>{" "}
+      with an account associated with this project
+    </>
+  );
+
+  const NoDataText = () => (
+    <a>
+      {t(
+        "Data is still being collected and checked. This visual will remain empty until data is properly quality assured."
+      )}
+    </a>
+  );
+
+  const renderText = () => {
+    switch (textType) {
+      case TEXT_TYPES.LOGGED_USER:
+        return <ProjectAccessText />;
+      case TEXT_TYPES.NOT_LOGGED_USER:
+        return <LoginText />;
+      case TEXT_TYPES.NO_DATA:
+        return <NoDataText />;
+      default:
+        return null;
+    }
+  };
+
   return (
     <div className={tw("relative w-full text-black", className)}>
       <div
         className={`absolute left-0 top-0 flex h-full w-full items-center justify-center rounded-xl ${
           isBlur ? "z-[2] bg-[#9d9a9a29] backdrop-blur-sm" : ""
         }`}
       >
-        <When condition={isBlur && !!textInformation}>
+        <When condition={isBlur && !!textType}>
           <Text variant="text-12-semibold" className="h-fit w-fit max-w-[80%] rounded-lg bg-white px-4 py-3">
-            {typeof textInformation === "string" ? textInformation : <LoginText />}
+            {renderText()}
           </Text>
         </When>
       </div>

src/components/extensive/PageElements/Card/PageCard.tsx

@@ -9,7 +9,7 @@ import Paper from "@/components/elements/Paper/Paper";
 import Text from "@/components/elements/Text/Text";
 import ToolTip from "@/components/elements/Tooltip/Tooltip";
 import { useMyUser } from "@/connections/User";
-import { NO_DATA_INFORMATION } from "@/constants/dashboardConsts";
+import { TEXT_TYPES } from "@/constants/dashboardConsts";
 import { withFrameworkShow } from "@/context/framework.provider";
 import { TextVariants } from "@/types/common";
 
@@ -70,7 +70,10 @@ const PageCard = ({
 
   return (
     <Paper {...props}>
-      <BlurContainer isBlur={!isUserAllowed} textInformation={user !== undefined ? NO_DATA_INFORMATION : <></>}>
+      <BlurContainer
+        isBlur={!isUserAllowed}
+        textType={user !== undefined ? TEXT_TYPES.LOGGED_USER : TEXT_TYPES.NOT_LOGGED_USER}
+      >
         <When condition={!!title || !!headerChildren}>
           <div className="flex flex-wrap justify-between">
             <When condition={!!title}>

src/constants/dashboardConsts.ts

@@ -38,10 +38,14 @@ export const ORGANIZATIONS_TYPES = {
   "for-profit-organization": "Enterprise"
 };
 
-export const NO_DATA_INFORMATION = "No data available. You may not have permission to view the project profile.";
-
 export const TERRAFUND_MONITORING_LINK = "https://www.wri.org/update/land-degradation-project-recipe-for-restoration";
 
+export const TEXT_TYPES = {
+  LOGGED_USER: "textForLoggedUser",
+  NOT_LOGGED_USER: "textForNotLoggedUser",
+  NO_DATA: "noData"
+};
+
 export const TERRAFUND_MRV_LINK = `<a href=${TERRAFUND_MONITORING_LINK} class="underline !text-black" target="_blank">TerraFund's MRV framework</a>`;
 
 export const DEFAULT_POLYGONS_DATA = {

src/pages/dashboard/charts/CustomLabelRestoration.tsx

@@ -14,7 +14,7 @@ export const CustomLabel: React.FC<any> = props => {
       dominantBaseline={isSmallBar ? "bottom" : "middle"}
       className="text-12"
     >
-      {`${value.toFixed(0)} ha`}
+      {`${Math.round(value).toLocaleString()} ha`}
     </text>
   );
 };

src/pages/dashboard/components/SecDashboard.tsx

@@ -18,7 +18,8 @@ import {
   DUMMY_DATA_FOR_CHART_GROUPED_BAR_CHART_GENDER,
   DUMMY_DATA_FOR_CHART_MULTI_LINE_CHART,
   DUMMY_DATA_FOR_CHART_SIMPLE_BAR_CHART,
-  DUMMY_DATA_TARGET_LAND_USE_TYPES_REPRESENTED
+  DUMMY_DATA_TARGET_LAND_USE_TYPES_REPRESENTED,
+  TEXT_TYPES
 } from "@/constants/dashboardConsts";
 import { TextVariants } from "@/types/common";
 import { getRestorationGoalDataForChart, getRestorationGoalResumeData, isEmptyChartData } from "@/utils/dashboardUtils";
@@ -84,10 +85,6 @@ const SecDashboard = ({
   const [treesPlantedByYear, setTreesPlantedByYear] = useState<{ name: string; values: any }[]>([]);
   const t = useT();
 
-  const noDataInformation = t(
-    "Data is still being collected and checked. This visual will remain empty until data is properly quality assured."
-  );
-
   const tableColumns = [
     {
       header: isTableProject ? "Organization" : "Specie",
@@ -179,7 +176,7 @@ const SecDashboard = ({
         <When condition={chartType === CHART_TYPES.multiLineChart}>
           <BlurContainer
             isBlur={(isUserAllowed ?? false) && !isLoading && isEmptyChartData(chartType ?? "", treesPlantedByYear)}
-            textInformation={noDataInformation}
+            textType={TEXT_TYPES.NO_DATA}
             className="ml-[20px] lg:ml-[15px]"
           >
             <MultiLineChart
@@ -197,7 +194,7 @@ const SecDashboard = ({
             isBlur={
               (isUserAllowed ?? false) && !isLoading && isEmptyChartData(CHART_TYPES.groupedBarChart, dataForChart)
             }
-            textInformation={noDataInformation}
+            textType={TEXT_TYPES.NO_DATA}
           >
             <GroupedBarChart
               data={
@@ -211,7 +208,7 @@ const SecDashboard = ({
         <When condition={chartType === CHART_TYPES.doughnutChart}>
           <BlurContainer
             isBlur={(isUserAllowed ?? false) && !isLoading && isEmptyChartData(CHART_TYPES.doughnutChart, dataForChart)}
-            textInformation={noDataInformation}
+            textType={TEXT_TYPES.NO_DATA}
           >
             <DoughnutChart
               data={
@@ -229,7 +226,7 @@ const SecDashboard = ({
               !isLoading &&
               isEmptyChartData(CHART_TYPES.simpleBarChart, dataForChart?.restorationStrategiesRepresented)
             }
-            textInformation={noDataInformation}
+            textType={TEXT_TYPES.NO_DATA}
             className="ml-[40px] lg:ml-[35px]"
           >
             <SimpleBarChart
@@ -297,7 +294,7 @@ const SecDashboard = ({
               !isLoading &&
               (data?.graphicTargetLandUseTypes === undefined || data?.graphicTargetLandUseTypes.length === 0)
             }
-            textInformation={noDataInformation}
+            textType={TEXT_TYPES.NO_DATA}
           >
             <GraphicIconDashboard
               data={

src/pages/dashboard/index.page.tsx

@@ -12,11 +12,12 @@ import { useMyUser } from "@/connections/User";
 import {
   CHART_TYPES,
   JOBS_CREATED_CHART_TYPE,
-  NO_DATA_INFORMATION,
   ORGANIZATIONS_TYPES,
-  TERRAFUND_MRV_LINK
+  TERRAFUND_MRV_LINK,
+  TEXT_TYPES
 } from "@/constants/dashboardConsts";
 import { useDashboardContext } from "@/context/dashboard.provider";
+import { useLogout } from "@/hooks/logout";
 import {
   formatLabelsVolunteers,
   getFrameworkName,
@@ -59,6 +60,7 @@ export interface GraphicLegendProps {
 const Dashboard = () => {
   const t = useT();
   const [, { user }] = useMyUser();
+  const logout = useLogout();
   const { filters, setFilters, frameworks } = useDashboardContext();
   const {
     dashboardHeader,
@@ -296,7 +298,8 @@ const Dashboard = () => {
           </When>
           <BlurContainer
             isBlur={isUserAllowed !== undefined ? !isUserAllowed?.allowed : false}
-            textInformation={user !== undefined ? NO_DATA_INFORMATION : <></>}
+            textType={user !== undefined ? TEXT_TYPES.LOGGED_USER : TEXT_TYPES.NOT_LOGGED_USER}
+            logout={logout}
           >
             <div className="grid w-full grid-cols-3 gap-4">
               {dashboardHeader.map((item, index) => (

src/utils/dashboardUtils.ts

@@ -354,7 +354,7 @@ export const parseHectaresUnderRestorationData = (
   const formatValueText = (value: number): string => {
     if (!total_hectares_restored) return "0 ha 0%";
     const percentage = (value / total_hectares_restored) * 100;
-    return `${value.toFixed(0)} ha ${percentage.toFixed(2)}%`;
+    return `${Math.round(value).toLocaleString()} ha ${percentage.toFixed(0)}%`;
   };
 
   const getLandUseTypeTitle = (value: string): string => {