Make reset button change the goal to null

CruGlobal · Dec 19, 2024 · 35fe64e · 35fe64e
1 parent 59cdef8
commit 35fe64e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 25 deletions.
diff --git a/...onents/Settings/preferences/accordions/MonthlyGoalAccordion/MonthlyGoalAccordion.test.tsx b/...onents/Settings/preferences/accordions/MonthlyGoalAccordion/MonthlyGoalAccordion.test.tsx
@@ -158,51 +158,45 @@ describe('MonthlyGoalAccordion', () => {
           expandedPanel={label}
         />,
       );
-      const input = getByRole('spinbutton', { name: label });
 
       expect(
         await findByText(
-          'Based on the past year, NetSuite estimates that you need at least $1,500 of monthly support. You can use this amount or choose your own target monthly goal.',
+          /Based on the past year, NetSuite estimates that you need at least \$1,500 of monthly support./,
         ),
       ).toBeInTheDocument();
 
       const resetButton = getByRole('button', { name: /Reset/ });
       userEvent.click(resetButton);
-      expect(input).toHaveValue(1500);
-      expect(resetButton).not.toBeInTheDocument();
 
       await waitFor(() =>
         expect(mutationSpy).toHaveGraphqlOperation('UpdateAccountPreferences', {
           input: {
             id: accountListId,
             attributes: {
               settings: {
-                monthlyGoal: 1500,
+                monthlyGoal: null,
               },
             },
           },
         }),
       );
     });
 
-    it('hides reset button if goal matches calculated goal', async () => {
-      const { getByRole, findByText, queryByRole } = render(
+    it('hides reset button if goal is null', async () => {
+      const { findByText, queryByRole } = render(
         <Components
-          monthlyGoal={1000}
+          monthlyGoal={null}
           machineCalculatedGoal={1000}
           expandedPanel={label}
         />,
       );
 
       expect(
         await findByText(
-          'Based on the past year, NetSuite estimates that you need at least $1,000 of monthly support. You can use this amount or choose your own target monthly goal.',
+          /Based on the past year, NetSuite estimates that you need at least \$1,000 of monthly support./,
         ),
       ).toBeInTheDocument();
       expect(queryByRole('button', { name: /Reset/ })).not.toBeInTheDocument();
-
-      userEvent.type(getByRole('spinbutton', { name: label }), '0');
-      expect(getByRole('button', { name: /Reset/ })).toBeInTheDocument();
     });
   });
 });
diff --git a/src/components/Settings/preferences/accordions/MonthlyGoalAccordion/MonthlyGoalAccordion.tsx b/src/components/Settings/preferences/accordions/MonthlyGoalAccordion/MonthlyGoalAccordion.tsx
@@ -47,7 +47,7 @@ interface MonthlyGoalAccordionProps {
 export const MonthlyGoalAccordion: React.FC<MonthlyGoalAccordionProps> = ({
   handleAccordionChange,
   expandedPanel,
-  monthlyGoal,
+  monthlyGoal: initialMonthlyGoal,
   accountListId,
   currency,
   disabled,
@@ -72,8 +72,8 @@ export const MonthlyGoalAccordion: React.FC<MonthlyGoalAccordionProps> = ({
   );
 
   const formattedMonthlyGoal = useMemo(
-    () => formatMonthlyGoal(monthlyGoal, currency, locale),
-    [monthlyGoal, currency, locale],
+    () => formatMonthlyGoal(initialMonthlyGoal, currency, locale),
+    [initialMonthlyGoal, currency, locale],
   );
 
   const onSubmit = async (
@@ -105,10 +105,15 @@ export const MonthlyGoalAccordion: React.FC<MonthlyGoalAccordionProps> = ({
   };
 
   const instructions = calculatedGoal
-    ? t(
-        'Based on the past year, NetSuite estimates that you need at least {{goal}} of monthly support. You can use this amount or choose your own target monthly goal.',
-        { goal: formattedCalculatedGoal },
-      )
+    ? initialMonthlyGoal === null
+      ? t(
+          'Based on the past year, NetSuite estimates that you need at least {{goal}} of monthly support. You can choose your own target monthly goal or leave it blank to use the estimate.',
+          { goal: formattedCalculatedGoal },
+        )
+      : t(
+          'Based on the past year, NetSuite estimates that you need at least {{goal}} of monthly support. You can choose your own target monthly goal or reset it to the estimate.',
+          { goal: formattedCalculatedGoal },
+        )
     : t(
         'This amount should be set to the amount your organization has determined is your target monthly goal. If you do not know, make your best guess for now. You can change it at any time.',
       );
@@ -124,7 +129,7 @@ export const MonthlyGoalAccordion: React.FC<MonthlyGoalAccordionProps> = ({
     >
       <Formik
         initialValues={{
-          monthlyGoal: monthlyGoal,
+          monthlyGoal: initialMonthlyGoal,
         }}
         validationSchema={accountPreferencesSchema}
         onSubmit={onSubmit}
@@ -135,11 +140,9 @@ export const MonthlyGoalAccordion: React.FC<MonthlyGoalAccordionProps> = ({
           values: { monthlyGoal },
           errors,
           handleSubmit,
-          submitForm,
           isSubmitting,
           isValid,
           handleChange,
-          setFieldValue,
         }): ReactElement => (
           <form onSubmit={handleSubmit}>
             <FieldWrapper helperText={instructions}>
@@ -169,7 +172,7 @@ export const MonthlyGoalAccordion: React.FC<MonthlyGoalAccordionProps> = ({
               >
                 {t('Save')}
               </Button>
-              {calculatedGoal && monthlyGoal !== calculatedGoal && (
+              {calculatedGoal && initialMonthlyGoal !== null && (
                 <Tooltip
                   title={t(
                     'Reset to NetSuite estimated goal of {{calculatedGoal}}',
@@ -182,8 +185,7 @@ export const MonthlyGoalAccordion: React.FC<MonthlyGoalAccordionProps> = ({
                     variant="outlined"
                     type="button"
                     onClick={() => {
-                      setFieldValue('monthlyGoal', calculatedGoal);
-                      submitForm();
+                      onSubmit({ monthlyGoal: null });
                     }}
                   >
                     {t('Reset to Calculated Goal')}