diff --git a/pages/accountLists/[accountListId]/settings/preferences.page.test.tsx b/pages/accountLists/[accountListId]/settings/preferences.page.test.tsx index ad314571d4..1879ddc62d 100644 --- a/pages/accountLists/[accountListId]/settings/preferences.page.test.tsx +++ b/pages/accountLists/[accountListId]/settings/preferences.page.test.tsx @@ -286,9 +286,20 @@ describe('Preferences page', () => { ), ).toBeInTheDocument(); - // Home Country + // Geographic Location const skipButton = getByRole('button', { name: 'Skip Step' }); userEvent.click(skipButton); + expect( + await findByText('Are you within 50 miles of a major city?'), + ).toBeInTheDocument(); + expect( + await findByText( + 'This should be the major city within 50 miles of you. If none apply, leave this blank.', + ), + ).toBeInTheDocument(); + + // Home Country + userEvent.click(skipButton); expect( await findByText( 'This should be the place from which you are living and sending out physical communications. This will be used in exports for mailing address information.', diff --git a/pages/accountLists/[accountListId]/settings/preferences.page.tsx b/pages/accountLists/[accountListId]/settings/preferences.page.tsx index 974d80faf6..87f25d8edf 100644 --- a/pages/accountLists/[accountListId]/settings/preferences.page.tsx +++ b/pages/accountLists/[accountListId]/settings/preferences.page.tsx @@ -16,6 +16,7 @@ import { CurrencyAccordion } from 'src/components/Settings/preferences/accordion import { DefaultAccountAccordion } from 'src/components/Settings/preferences/accordions/DefaultAccountAccordion/DefaultAccountAccordion'; import { EarlyAdopterAccordion } from 'src/components/Settings/preferences/accordions/EarlyAdopterAccordion/EarlyAdopterAccordion'; import { ExportAllDataAccordion } from 'src/components/Settings/preferences/accordions/ExportAllDataAccordion/ExportAllDataAccordion'; +import { GeographicLocationAccordion } from 'src/components/Settings/preferences/accordions/GeographicLocationAccordion/GeographicLocationAccordion'; import { HomeCountryAccordion } from 'src/components/Settings/preferences/accordions/HomeCountryAccordion/HomeCountryAccordion'; import { HourToSendNotificationsAccordion } from 'src/components/Settings/preferences/accordions/HourToSendNotificationsAccordion/HourToSendNotificationsAccordion'; import { LanguageAccordion } from 'src/components/Settings/preferences/accordions/LanguageAccordion/LanguageAccordion'; @@ -51,6 +52,7 @@ const Preferences: React.FC = () => { const setupAccordions = [ PreferenceAccordion.Locale, PreferenceAccordion.MonthlyGoal, + PreferenceAccordion.GeographicLocation, PreferenceAccordion.HomeCountry, ]; const [setup, setSetup] = useState(0); @@ -139,6 +141,8 @@ const Preferences: React.FC = () => { case 1: return t('Great progress comes from great goals!'); case 2: + return t('Are you within 50 miles of a major city?'); + case 3: return t('What country are you in?'); default: return ''; @@ -254,6 +258,17 @@ const Preferences: React.FC = () => { disabled={onSetupTour && setup !== 1} handleSetupChange={handleSetupChange} /> + { } accountListId={accountListId} countries={countries} - disabled={onSetupTour && setup !== 2} + disabled={onSetupTour && setup !== 3} handleSetupChange={handleSetupChange} /> )} /> + )} diff --git a/src/components/HrTools/GoalCalculator/SummaryReport/Steps/PresentingYourGoalStep/GoalApplicationButtonGroup.test.tsx b/src/components/HrTools/GoalCalculator/SummaryReport/Steps/PresentingYourGoalStep/GoalApplicationButtonGroup.test.tsx index d901339b4f..038b471016 100644 --- a/src/components/HrTools/GoalCalculator/SummaryReport/Steps/PresentingYourGoalStep/GoalApplicationButtonGroup.test.tsx +++ b/src/components/HrTools/GoalCalculator/SummaryReport/Steps/PresentingYourGoalStep/GoalApplicationButtonGroup.test.tsx @@ -1,12 +1,24 @@ import React from 'react'; import { render, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { GoalCalculatorTestWrapper } from '../../../GoalCalculatorTestWrapper'; +import { + GoalCalculatorTestWrapper, + goalCalculationMock, +} from '../../../GoalCalculatorTestWrapper'; import { GoalApplicationButtonGroup } from './GoalApplicationButtonGroup'; const mutationSpy = jest.fn(); -const TestComponent: React.FC = () => ( - +const TestComponent: React.FC<{ geographicLocation?: string | null }> = ({ + geographicLocation, +}) => ( + ); @@ -65,4 +77,32 @@ describe('GoalApplicationButtonGroup', () => { await findByText('Successfully updated your monthly goal to $16,139!'), ).toBeInTheDocument(); }); + + it('sends geographicLocation when the goal calculation has one', async () => { + const { getByRole, findByText } = render( + , + ); + + const applyButton = getByRole('button', { name: /apply goal to mpdx/i }); + await waitFor(() => expect(applyButton).toBeEnabled()); + userEvent.click(applyButton); + + await waitFor(() => + expect(mutationSpy).toHaveGraphqlOperation('UpdateAccountPreferences', { + input: { + id: 'account-list-1', + attributes: { + id: 'account-list-1', + settings: { geographicLocation: 'Miami, FL' }, + }, + }, + }), + ); + + expect( + await findByText( + 'Successfully updated your monthly goal to $16,139 and geographic location to Miami, FL!', + ), + ).toBeInTheDocument(); + }); }); diff --git a/src/components/HrTools/GoalCalculator/SummaryReport/Steps/PresentingYourGoalStep/GoalApplicationButtonGroup.tsx b/src/components/HrTools/GoalCalculator/SummaryReport/Steps/PresentingYourGoalStep/GoalApplicationButtonGroup.tsx index f850f11b7d..ce997fc3ac 100644 --- a/src/components/HrTools/GoalCalculator/SummaryReport/Steps/PresentingYourGoalStep/GoalApplicationButtonGroup.tsx +++ b/src/components/HrTools/GoalCalculator/SummaryReport/Steps/PresentingYourGoalStep/GoalApplicationButtonGroup.tsx @@ -18,6 +18,8 @@ export const GoalApplicationButtonGroup: React.FC = () => { constants, } = useGoalCalculator(); const monthlyGoal = Math.round(overallTotal); + const geographicLocation = + goalCalculationResult.data?.goalCalculation?.geographicLocation ?? null; const [updateAccountPreferences, { loading }] = useUpdateAccountPreferencesMutation(); const accountListId = useAccountListId() || ''; @@ -30,15 +32,30 @@ export const GoalApplicationButtonGroup: React.FC = () => { id: accountListId, attributes: { id: accountListId, - settings: { monthlyGoal }, + settings: { + monthlyGoal, + geographicLocation, + }, }, }, }, onCompleted: () => { + const formattedTotal = currencyFormat(monthlyGoal, 'USD', locale); enqueueSnackbar( - t('Successfully updated your monthly goal to {{formattedTotal}}!', { - formattedTotal: currencyFormat(monthlyGoal, 'USD', locale), - }), + geographicLocation + ? t( + 'Successfully updated your monthly goal to {{formattedTotal}} and geographic location to {{geographicLocation}}!', + { + formattedTotal, + geographicLocation, + }, + ) + : t( + 'Successfully updated your monthly goal to {{formattedTotal}}!', + { + formattedTotal, + }, + ), { variant: 'success', }, diff --git a/src/components/HrTools/NsoMpdQuestionnaire/NsoMpdQuestionnaireTestWrapper.tsx b/src/components/HrTools/NsoMpdQuestionnaire/NsoMpdQuestionnaireTestWrapper.tsx index ffdd136f59..f552368b25 100644 --- a/src/components/HrTools/NsoMpdQuestionnaire/NsoMpdQuestionnaireTestWrapper.tsx +++ b/src/components/HrTools/NsoMpdQuestionnaire/NsoMpdQuestionnaireTestWrapper.tsx @@ -5,6 +5,7 @@ import { SnackbarProvider } from 'notistack'; import { DeepPartial } from 'ts-essentials'; import TestRouter from '__tests__/util/TestRouter'; import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; +import { GetAccountPreferencesQuery } from 'src/components/Settings/preferences/GetAccountPreferences.generated'; import { GetUserQuery } from 'src/components/User/GetUser.generated'; import { GoalCalculationAge, @@ -59,6 +60,8 @@ export interface NsoMpdQuestionnaireTestWrapperProps { mockPush?: jest.Mock; /** Override the OneApp ministries list, e.g. `[]` to exercise the load-failure state. */ ministries?: MinistryMock[]; + /** The account's saved Geographic Location preference. Defaults to null. */ + accountGeographicLocation?: string | null; children?: React.ReactNode; } @@ -70,6 +73,7 @@ export const NsoMpdQuestionnaireTestWrapper: React.FC< onCall, mockPush, ministries = defaultMinistries, + accountGeographicLocation = null, children, }) => { return ( @@ -80,11 +84,19 @@ export const NsoMpdQuestionnaireTestWrapper: React.FC< GoalCalculatorConstants: GoalCalculatorConstantsQuery; NewStaffQuestionnaire: NewStaffQuestionnaireQuery; Ministries: MinistriesQuery; + GetAccountPreferences: GetAccountPreferencesQuery; }> mocks={{ GetUser: { user: { avatar: 'avatar.jpg', staffAccountId: '000123456' }, }, + GetAccountPreferences: { + accountList: { + settings: { + geographicLocation: accountGeographicLocation, + }, + }, + }, NewStaffQuestionnaire: { newStaffQuestionnaire: newStaffQuestionnaire === null diff --git a/src/components/HrTools/NsoMpdQuestionnaire/Summary/Summary.test.tsx b/src/components/HrTools/NsoMpdQuestionnaire/Summary/Summary.test.tsx index 8f047673f1..0356e808bb 100644 --- a/src/components/HrTools/NsoMpdQuestionnaire/Summary/Summary.test.tsx +++ b/src/components/HrTools/NsoMpdQuestionnaire/Summary/Summary.test.tsx @@ -240,4 +240,79 @@ describe('Summary', () => { await waitFor(() => expect(submitButton).toBeEnabled()); expect(queryByRole('alert')).not.toBeInTheDocument(); }); + + describe('Geographic location preference', () => { + it('shows info alert and updates the account preference when it differs', async () => { + const { findByRole, getByRole, findByText } = render( + , + ); + const submitButton = await findByRole('button', { name: 'Submit' }); + await waitFor(() => expect(submitButton).toBeEnabled()); + userEvent.click(submitButton); + + expect( + await findByText( + 'Your geographic location will be updated as Miami, FL in your account settings.', + ), + ).toBeInTheDocument(); + + const dialog = getByRole('dialog'); + userEvent.click(within(dialog).getByRole('button', { name: 'Submit' })); + + await waitFor(() => + expect(mutationSpy).toHaveGraphqlOperation('UpdateAccountPreferences', { + input: { + id: 'account-list-1', + attributes: { + id: 'account-list-1', + settings: { geographicLocation: 'Miami, FL' }, + }, + }, + }), + ); + }); + + it('does not show info alert or update the preference when it already matches', async () => { + const { findByRole, queryByText } = render( + , + ); + const submitButton = await findByRole('button', { name: 'Submit' }); + await waitFor(() => expect(submitButton).toBeEnabled()); + userEvent.click(submitButton); + + const dialog = await findByRole('dialog'); + await waitFor(() => + expect( + queryByText( + 'Your geographic location will be updated as Miami, FL in your account settings.', + ), + ).not.toBeInTheDocument(), + ); + + userEvent.click(within(dialog).getByRole('button', { name: 'Submit' })); + + await waitFor(() => + expect(mutationSpy).toHaveGraphqlOperation( + 'CompleteNewStaffQuestionnaire', + ), + ); + expect(mutationSpy).not.toHaveGraphqlOperation( + 'UpdateAccountPreferences', + ); + }); + }); }); diff --git a/src/components/HrTools/NsoMpdQuestionnaire/Summary/Summary.tsx b/src/components/HrTools/NsoMpdQuestionnaire/Summary/Summary.tsx index 1c4f832bf8..8c45f5ba0d 100644 --- a/src/components/HrTools/NsoMpdQuestionnaire/Summary/Summary.tsx +++ b/src/components/HrTools/NsoMpdQuestionnaire/Summary/Summary.tsx @@ -3,6 +3,8 @@ import React, { useState } from 'react'; import { Alert, Box, Divider, Link, Stack, Typography } from '@mui/material'; import { useSnackbar } from 'notistack'; import { useTranslation } from 'react-i18next'; +import { useGetAccountPreferencesQuery } from 'src/components/Settings/preferences/GetAccountPreferences.generated'; +import { useUpdateAccountPreferencesMutation } from 'src/components/Settings/preferences/accordions/UpdateAccountPreferences.generated'; import { Confirmation } from 'src/components/Shared/Modal/Confirmation/Confirmation'; import { useAccountListId } from 'src/hooks/useAccountListId'; import { BackButton } from '../Shared/BackButton'; @@ -30,15 +32,59 @@ export const Summary: React.FC = () => { incompleteSteps.includes(section.step), ); + const { data } = useGetAccountPreferencesQuery({ + variables: { + accountListId, + }, + }); + const [updateAccountPreferences] = useUpdateAccountPreferencesMutation(); + + const updateGeographicLocation = + data?.accountList?.settings?.geographicLocation !== + questionnaire?.geographicLocation; + // Complete the questionnaire, then redirect to the dashboard on success. const handleSubmit = async () => { await completeQuestionnaire(); + + if (updateGeographicLocation) { + updateAccountPreferences({ + variables: { + input: { + id: accountListId, + attributes: { + id: accountListId, + settings: { + geographicLocation: questionnaire?.geographicLocation, + }, + }, + }, + }, + }); + } + enqueueSnackbar(t('Questionnaire submitted successfully.'), { variant: 'success', }); await router.push(`/accountLists/${accountListId}`); }; + const message = ( + <> + {t( + "Once you submit, you won't be able to make any more changes. Do you want to continue?", + )} + {updateGeographicLocation && ( + + {t( + 'Your geographic location will be updated as {{geographicLocation}} in your account settings.', + { geographicLocation: questionnaire?.geographicLocation }, + )} + + )} + + ); + return ( @@ -95,9 +141,7 @@ export const Summary: React.FC = () => { { ).toBeInTheDocument(); }); + it('sends geographic location when the calculation has one', async () => { + const mutationSpy = jest.fn(); + const { findByRole, findByText } = render( + + + , + ); + + await advanceToLastStep(findByRole); + + userEvent.click( + await findByRole('button', { name: 'Apply Goal to MPDX' }), + ); + + await waitFor(() => + expect(mutationSpy).toHaveGraphqlOperation('UpdateAccountPreferences', { + input: { + id: 'abc123', + attributes: { + id: 'abc123', + settings: { geographicLocation: 'Miami, FL' }, + }, + }, + }), + ); + + expect( + await findByText( + `Successfully updated your monthly goal to $${EXPECTED_MONTHLY_GOAL.toLocaleString( + 'en-US', + )} and geographic location to Miami, FL!`, + ), + ).toBeInTheDocument(); + }); + it('keeps the Apply Goal to MPDX button disabled after a successful submission', async () => { const { findByRole, findByText } = render( diff --git a/src/components/HrTools/PdsGoalCalculator/PdsGoalCalculator.tsx b/src/components/HrTools/PdsGoalCalculator/PdsGoalCalculator.tsx index e41b0f6b6a..3e2c21c84f 100644 --- a/src/components/HrTools/PdsGoalCalculator/PdsGoalCalculator.tsx +++ b/src/components/HrTools/PdsGoalCalculator/PdsGoalCalculator.tsx @@ -64,6 +64,7 @@ const MainContent: React.FC = () => { summaryData, handleContinue, handlePreviousStep, + calculation, } = usePdsGoalCalculator(); const { allValid } = useAutosaveForm(); const [updateAccountPreferences, { loading: updating }] = @@ -78,23 +79,40 @@ const MainContent: React.FC = () => { return; } const monthlyGoal = Math.round(summaryData.overallTotal); + const geographicLocation = calculation?.geographicLocation ?? null; await updateAccountPreferences({ variables: { input: { id: accountListId, attributes: { id: accountListId, - settings: { monthlyGoal }, + settings: { + monthlyGoal, + geographicLocation, + }, }, }, }, refetchQueries: ['GetDashboard', 'GetDonationGraph'], onCompleted: () => { setSubmitted(true); + + const formattedTotal = currencyFormat(monthlyGoal, 'USD', locale); enqueueSnackbar( - t('Successfully updated your monthly goal to {{formattedTotal}}!', { - formattedTotal: currencyFormat(monthlyGoal, 'USD', locale), - }), + geographicLocation + ? t( + 'Successfully updated your monthly goal to {{formattedTotal}} and geographic location to {{geographicLocation}}!', + { + formattedTotal, + geographicLocation, + }, + ) + : t( + 'Successfully updated your monthly goal to {{formattedTotal}}!', + { + formattedTotal, + }, + ), { variant: 'success' }, ); }, diff --git a/src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.tsx b/src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.tsx index 0e690a2013..b4ed41f2d5 100644 --- a/src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.tsx +++ b/src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.tsx @@ -30,6 +30,7 @@ import { import { useGoalCalculatorConstants } from 'src/hooks/useGoalCalculatorConstants'; import { useLocale } from 'src/hooks/useLocale'; import { percentageFormat } from 'src/lib/intlFormat'; +import { LocationInfoAlert } from '../../Shared/LocationInfoAlert/LocationInfoAlert'; import { AutosaveTextField } from '../Shared/Autosave/AutosaveTextField'; import { useSaveField } from '../Shared/Autosave/useSaveField'; import { usePdsGoalCalculator } from '../Shared/PdsGoalCalculatorContext'; @@ -296,6 +297,7 @@ export const SetupStep: React.FC = () => { /> )} /> + diff --git a/src/components/HrTools/SalaryCalculator/SalaryCalculatorTestWrapper.tsx b/src/components/HrTools/SalaryCalculator/SalaryCalculatorTestWrapper.tsx index c8e7049c7d..4ce29e1fca 100644 --- a/src/components/HrTools/SalaryCalculator/SalaryCalculatorTestWrapper.tsx +++ b/src/components/HrTools/SalaryCalculator/SalaryCalculatorTestWrapper.tsx @@ -4,6 +4,7 @@ import { merge } from 'lodash'; import { DeepPartial } from 'ts-essentials'; import TestRouter from '__tests__/util/TestRouter'; import { GqlMockedProvider, gqlMock } from '__tests__/util/graphqlMocking'; +import { GetAccountPreferencesQuery } from 'src/components/Settings/preferences/GetAccountPreferences.generated'; import { StaffAccountQuery } from 'src/components/Shared/StaffAccount/StaffAccount.generated'; import { GetUserQuery } from 'src/components/User/GetUser.generated'; import { @@ -111,6 +112,7 @@ export interface SalaryCalculatorTestWrapperProps { editing?: boolean; userType?: UserTypeEnum; usStaffGroup?: UsStaffGroupEnum; + accountGeographicLocation?: string | null; } export const SalaryCalculatorTestWrapper: React.FC< @@ -127,6 +129,7 @@ export const SalaryCalculatorTestWrapper: React.FC< editing = true, userType = UserTypeEnum.UsStaff, usStaffGroup = UsStaffGroupEnum.SeniorStaff, + accountGeographicLocation = null, }) => { const hcmUserMerged = merge({}, hcmUserMock, hcmUser); const hcmSpouseMerged = merge({}, hcmSpouseMock, hcmSpouse); @@ -149,6 +152,7 @@ export const SalaryCalculatorTestWrapper: React.FC< GoalCalculatorConstants: GoalCalculatorConstantsQuery; StaffAccount: StaffAccountQuery; GetUser: GetUserQuery; + GetAccountPreferences: GetAccountPreferencesQuery; }> mocks={{ StaffAccount: { @@ -163,6 +167,13 @@ export const SalaryCalculatorTestWrapper: React.FC< usStaffGroup, }, }, + GetAccountPreferences: { + accountList: { + settings: { + geographicLocation: accountGeographicLocation, + }, + }, + }, PayrollDates: { payrollDates, }, diff --git a/src/components/HrTools/SalaryCalculator/StepNavigation/StepNavigation.test.tsx b/src/components/HrTools/SalaryCalculator/StepNavigation/StepNavigation.test.tsx index dac2b41edf..31a390ce16 100644 --- a/src/components/HrTools/SalaryCalculator/StepNavigation/StepNavigation.test.tsx +++ b/src/components/HrTools/SalaryCalculator/StepNavigation/StepNavigation.test.tsx @@ -21,6 +21,7 @@ jest.mock('src/components/Shared/Autosave/AutosaveForm', () => { }; }); +const location = 'Chicago, IL'; const mutationSpy = jest.fn(); const TestComponent: React.FC = (props) => ( @@ -152,4 +153,55 @@ describe('SubmitButton', () => { expect(mutationSpy).toHaveGraphqlOperation('SubmitSalaryCalculation'), ); }); + + it('updates the account geographic location preference when submitting', async () => { + const { findByText } = render( + + + , + ); + + userEvent.click(await findByText('Submit')); + userEvent.click(await findByText('Yes, Continue')); + + await waitFor(() => + expect(mutationSpy).toHaveGraphqlOperation('UpdateAccountPreferences', { + input: { + id: 'account-list-1', + attributes: { + id: 'account-list-1', + settings: { geographicLocation: location }, + }, + }, + }), + ); + }); + + it('does not show geographic location info alert when it matches account preferences', async () => { + const { findByRole, queryByText } = render( + + + , + ); + + userEvent.click(await findByRole('button', { name: 'Submit' })); + + await findByRole('dialog'); + await waitFor(() => + expect( + queryByText( + `Your geographic location will be updated as ${location} in your account settings.`, + ), + ).not.toBeInTheDocument(), + ); + }); }); diff --git a/src/components/HrTools/SalaryCalculator/StepNavigation/StepNavigation.tsx b/src/components/HrTools/SalaryCalculator/StepNavigation/StepNavigation.tsx index c6adf6ef41..a049684aef 100644 --- a/src/components/HrTools/SalaryCalculator/StepNavigation/StepNavigation.tsx +++ b/src/components/HrTools/SalaryCalculator/StepNavigation/StepNavigation.tsx @@ -6,6 +6,8 @@ import { Box, Button, ButtonProps, Stack, Typography } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'react-i18next'; import { SubmitModal } from 'src/components/HrTools/Shared/CalculationReports/SubmitModal/SubmitModal'; +import { useGetAccountPreferencesQuery } from 'src/components/Settings/preferences/GetAccountPreferences.generated'; +import { useUpdateAccountPreferencesMutation } from 'src/components/Settings/preferences/accordions/UpdateAccountPreferences.generated'; import { useAutosaveForm } from 'src/components/Shared/Autosave/AutosaveForm'; import { useAccountListId } from 'src/hooks/useAccountListId'; import { useSalaryCalculator } from '../SalaryCalculatorContext/SalaryCalculatorContext'; @@ -92,12 +94,23 @@ export const ContinueButton: React.FC = (props) => { export const SubmitButton: React.FC = (props) => { const { t } = useTranslation(); + const accountListId = useAccountListId(); const { handleNextStep, calculation } = useSalaryCalculator(); const [submit, { loading: submitting }] = useSubmitSalaryCalculationMutation(); const [submitDialogOpen, setSubmitDialogOpen] = useState(false); const { title, content, subContent } = useSubmitDialogContent(); + const { data } = useGetAccountPreferencesQuery({ + variables: { + accountListId, + }, + }); + const [updateAccountPreferences] = useUpdateAccountPreferencesMutation(); + + const updateGeographicLocation = + data?.accountList?.settings?.geographicLocation !== calculation?.location; + const handleSubmit = async () => { if (calculation) { await submit({ @@ -108,6 +121,22 @@ export const SubmitButton: React.FC = (props) => { }, }); handleNextStep(); + + if (updateGeographicLocation) { + updateAccountPreferences({ + variables: { + input: { + id: accountListId, + attributes: { + id: accountListId, + settings: { + geographicLocation: calculation?.location, + }, + }, + }, + }, + }); + } } }; @@ -135,6 +164,11 @@ export const SubmitButton: React.FC = (props) => { overrideContent={content} overrideSubContent={subContent} submitting={submitting} + geographicLocation={ + updateGeographicLocation + ? (calculation?.location ?? undefined) + : undefined + } /> )} diff --git a/src/components/HrTools/Shared/CalculationReports/SubmitModal/SubmitModal.test.tsx b/src/components/HrTools/Shared/CalculationReports/SubmitModal/SubmitModal.test.tsx index 4f736a4633..f0d432e37d 100644 --- a/src/components/HrTools/Shared/CalculationReports/SubmitModal/SubmitModal.test.tsx +++ b/src/components/HrTools/Shared/CalculationReports/SubmitModal/SubmitModal.test.tsx @@ -23,6 +23,7 @@ const title = 'Test Title'; const content = 'Test Content'; const subContent = 'Test Sub Content'; const date = '2024-12-31'; +const location = 'Test Location'; const handleClose = jest.fn(); const handleConfirm = jest.fn(); @@ -85,6 +86,7 @@ interface TestComponentProps { additionalApproval?: boolean; splitAsr?: boolean; submitting?: boolean; + geographicLocation?: string; } const TestComponent: React.FC = ({ @@ -100,6 +102,7 @@ const TestComponent: React.FC = ({ additionalApproval, splitAsr, submitting, + geographicLocation, }) => ( @@ -122,6 +125,7 @@ const TestComponent: React.FC = ({ additionalApproval={additionalApproval} splitAsr={splitAsr} submitting={submitting} + geographicLocation={geographicLocation} /> @@ -288,6 +292,29 @@ describe('ConfirmationModal', () => { }); }); + describe('Geographic location info alert', () => { + it('shows an info alert naming the geographic location', async () => { + const { findByText } = render( + , + ); + + expect( + await findByText( + /Your geographic location will be updated as Test Location in your account settings\./i, + ), + ).toBeInTheDocument(); + }); + + it('does not show info alert when no geographic location is given', async () => { + const { findByRole, queryByText } = render(); + + await findByRole('dialog'); + expect( + queryByText(/Your geographic location will be updated/i), + ).not.toBeInTheDocument(); + }); + }); + describe('submitting state', () => { it('shows a loading spinner on the submit button while submitting', async () => { const { findByRole } = render( diff --git a/src/components/HrTools/Shared/CalculationReports/SubmitModal/SubmitModal.tsx b/src/components/HrTools/Shared/CalculationReports/SubmitModal/SubmitModal.tsx index d1ea607d4d..668318c92d 100644 --- a/src/components/HrTools/Shared/CalculationReports/SubmitModal/SubmitModal.tsx +++ b/src/components/HrTools/Shared/CalculationReports/SubmitModal/SubmitModal.tsx @@ -34,6 +34,7 @@ interface SubmitModalProps { splitAsr?: boolean; disableSubmit?: boolean; submitting?: boolean; + geographicLocation?: string; } export const SubmitModal: React.FC = ({ @@ -52,6 +53,7 @@ export const SubmitModal: React.FC = ({ splitAsr, disableSubmit, submitting, + geographicLocation, }) => { const { t } = useTranslation(); const locale = useLocale(); @@ -104,6 +106,14 @@ export const SubmitModal: React.FC = ({ )} + {geographicLocation && ( + + {t( + 'Your geographic location will be updated as {{geographicLocation}} in your account settings.', + { geographicLocation }, + )} + + )}