Adding Tootltip about where the goal was created on monthlyGoal

CruGlobal · Dec 16, 2024 · 0d3cbc6 · 0d3cbc6
1 parent c45692f
commit 0d3cbc6
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 32 deletions.
diff --git a/src/components/Dashboard/MonthlyGoal/MonthlyGoal.tsx b/src/components/Dashboard/MonthlyGoal/MonthlyGoal.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from 'react';
+import React, { ReactElement, useMemo, useState } from 'react';
 import {
   Box,
   Button,
@@ -7,6 +7,7 @@ import {
   Hidden,
   Skeleton,
   Theme,
+  Tooltip,
   Typography,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
@@ -69,6 +70,21 @@ const MonthlyGoal = ({
   const { classes } = useStyles();
   const locale = useLocale();
   const [showHealthIndicator, setShowHealthIndicator] = useState(false);
+  const [usingMachineCalculatedGoal, setUsingMachineCalculatedGoal] =
+    useState(false);
+
+  const toolTipText = useMemo(() => {
+    const formattedGoal = currencyFormat(goal, currencyCode, locale);
+    return usingMachineCalculatedGoal
+      ? t(
+          'Your current goal of {{goal}} is machine-calculated based on the past year of NetSuite data. You can adjust this goal in the settings preferences.',
+          { goal: formattedGoal },
+        )
+      : t(
+          'Your current goal of {{goal}} is staff-entered, based on the value set in your settings preferences.',
+          { goal: formattedGoal },
+        );
+  }, [usingMachineCalculatedGoal, goal, currencyCode, locale]);
 
   const receivedPercentage = received / goal;
   const pledgedPercentage = pledged / goal;
@@ -126,22 +142,28 @@ const MonthlyGoal = ({
               <Grid container spacing={{ sm: 1, md: 2 }}>
                 <Hidden smDown>
                   <Grid {...cssProps.statGrid} item data-testid="goalGrid">
-                    <Typography component="div" color="textSecondary">
-                      <div
-                        className={[classes.indicator, classes.goal].join(' ')}
-                      />
-                      {t('Goal')}
-                    </Typography>
-                    <Typography
-                      variant="h5"
-                      data-testid="MonthlyGoalTypographyGoal"
-                    >
-                      {loading ? (
-                        <Skeleton variant="text" />
-                      ) : (
-                        currencyFormat(goal, currencyCode, locale)
-                      )}
-                    </Typography>
+                    <Tooltip title={toolTipText}>
+                      <Box>
+                        <Typography component="div" color="textSecondary">
+                          <div
+                            className={[classes.indicator, classes.goal].join(
+                              ' ',
+                            )}
+                          />
+                          {t('Goal')}
+                        </Typography>
+                        <Typography
+                          variant="h5"
+                          data-testid="MonthlyGoalTypographyGoal"
+                        >
+                          {loading ? (
+                            <Skeleton variant="text" />
+                          ) : (
+                            currencyFormat(goal, currencyCode, locale)
+                          )}
+                        </Typography>
+                      </Box>
+                    </Tooltip>
                   </Grid>
                 </Hidden>
                 <Grid {...cssProps.statGrid} item>
@@ -263,8 +285,10 @@ const MonthlyGoal = ({
         <Grid {...cssProps.hIGrid} item>
           <HealthIndicatorWidget
             accountListId={accountListId}
-            setShowHealthIndicator={setShowHealthIndicator}
+            goal={goal}
             showHealthIndicator={showHealthIndicator}
+            setShowHealthIndicator={setShowHealthIndicator}
+            setUsingMachineCalculatedGoal={setUsingMachineCalculatedGoal}
           />
         </Grid>
       </Grid>

diff --git a/...ponents/Reports/HealthIndicatorReport/HealthIndicatorWidget/HealthIndicatorWidget.graphql b/...ponents/Reports/HealthIndicatorReport/HealthIndicatorWidget/HealthIndicatorWidget.graphql
@@ -10,5 +10,6 @@ query HealthIndicatorWidget($accountListId: ID!, $month: ISO8601Date!) {
     consistencyHi
     successHi
     depthHi
+    machineCalculatedGoal
   }
 }
diff --git a/...onents/Reports/HealthIndicatorReport/HealthIndicatorWidget/HealthIndicatorWidget.test.tsx b/...onents/Reports/HealthIndicatorReport/HealthIndicatorWidget/HealthIndicatorWidget.test.tsx
@@ -5,6 +5,7 @@ import { HealthIndicatorWidgetQuery } from './HealthIndicatorWidget.generated';
 
 const accountListId = 'account-list-1';
 const setShowHealthIndicator = jest.fn();
+const setUsingMachineCalculatedGoal = jest.fn();
 const mutationSpy = jest.fn();
 
 const healthIndicatorScore = {
@@ -14,15 +15,18 @@ const healthIndicatorScore = {
   consistencyHi: 70,
   successHi: 60,
   depthHi: 50,
+  machineCalculatedGoal: 7000,
 };
 
 interface ComponentsProps {
   healthIndicatorData?: HealthIndicatorWidgetQuery['healthIndicatorData'];
   showHealthIndicator?: boolean;
+  goal?: number;
 }
 const Components = ({
   healthIndicatorData = [],
   showHealthIndicator = true,
+  goal = 7000,
 }: ComponentsProps) => (
   <GqlMockedProvider<{ HealthIndicatorWidget: HealthIndicatorWidgetQuery }>
     mocks={{
@@ -33,9 +37,11 @@ const Components = ({
     onCall={mutationSpy}
   >
     <HealthIndicatorWidget
-      showHealthIndicator={showHealthIndicator}
       accountListId={accountListId}
+      goal={goal}
+      showHealthIndicator={showHealthIndicator}
       setShowHealthIndicator={setShowHealthIndicator}
+      setUsingMachineCalculatedGoal={setUsingMachineCalculatedGoal}
     />
   </GqlMockedProvider>
 );
@@ -93,19 +99,37 @@ describe('HealthIndicatorWidget', () => {
     expect(getByText('Depth')).toBeInTheDocument();
   });
 
-  it('renders the most recent data', async () => {
-    const { findByText, getByText, queryByText } = render(
-      <Components
-        healthIndicatorData={[
-          healthIndicatorScore,
-          { ...healthIndicatorScore, id: '2', overallHi: 20 },
-        ]}
-      />,
-    );
+  describe('setUsingMachineCalculatedGoal', () => {
+    it('should set to TRUE as machine goal is defined and the same as the monthly goal', async () => {
+      const { findByText } = render(
+        <Components
+          healthIndicatorData={[healthIndicatorScore]}
+          goal={healthIndicatorScore.machineCalculatedGoal}
+        />,
+      );
+
+      expect(await findByText('Ownership')).toBeInTheDocument();
+      expect(setUsingMachineCalculatedGoal).toHaveBeenCalledWith(true);
+    });
 
-    expect(await findByText('20')).toBeInTheDocument();
-    expect(getByText('Overall Health Indicator')).toBeInTheDocument();
+    it('should set to FALSE as machine goal is different than the monthly goal', async () => {
+      const { findByText } = render(
+        <Components healthIndicatorData={[healthIndicatorScore]} goal={1000} />,
+      );
 
-    expect(queryByText('90')).not.toBeInTheDocument();
+      expect(await findByText('Ownership')).toBeInTheDocument();
+      expect(setUsingMachineCalculatedGoal).toHaveBeenCalledWith(false);
+    });
+    it('should set to FALSE as machine goal is not defined', async () => {
+      const { findByText } = render(
+        <Components
+          healthIndicatorData={[healthIndicatorScore]}
+          goal={undefined}
+        />,
+      );
+
+      expect(await findByText('Ownership')).toBeInTheDocument();
+      expect(setUsingMachineCalculatedGoal).toHaveBeenCalledWith(false);
+    });
   });
 });
diff --git a/src/components/Reports/HealthIndicatorReport/HealthIndicatorWidget/HealthIndicatorWidget.tsx b/src/components/Reports/HealthIndicatorReport/HealthIndicatorWidget/HealthIndicatorWidget.tsx
@@ -32,14 +32,18 @@ const StyledBox = styled(Box)(() => ({
 
 interface HealthIndicatorWidgetProps {
   accountListId: string;
+  goal: number;
   showHealthIndicator: boolean;
   setShowHealthIndicator: Dispatch<SetStateAction<boolean>>;
+  setUsingMachineCalculatedGoal: Dispatch<SetStateAction<boolean>>;
 }
 
 export const HealthIndicatorWidget: React.FC<HealthIndicatorWidgetProps> = ({
   accountListId,
+  goal,
   showHealthIndicator,
   setShowHealthIndicator,
+  setUsingMachineCalculatedGoal,
 }) => {
   const { t } = useTranslation();
 
@@ -52,7 +56,12 @@ export const HealthIndicatorWidget: React.FC<HealthIndicatorWidgetProps> = ({
 
   useEffect(() => {
     setShowHealthIndicator(!!data?.healthIndicatorData.length);
-  }, [data]);
+    const machineCalculatedGoal =
+      data?.healthIndicatorData[0]?.machineCalculatedGoal;
+    setUsingMachineCalculatedGoal(
+      !!machineCalculatedGoal && goal === machineCalculatedGoal,
+    );
+  }, [data, goal]);
 
   if (!showHealthIndicator) {
     return null;