Navigation warning

This commit is contained in:
Connor Yoh 2025-09-26 16:15:01 +01:00
parent f70e45cee4
commit 99faf14929
2 changed files with 44 additions and 31 deletions

View File

@ -1,4 +1,10 @@
{ {
"unsavedChanges": "You have unsaved changes to your PDF. What would you like to do?",
"unsavedChangesTitle": "Unsaved Changes",
"keepWorking": "Keep Working",
"discardChanges": "Discard Changes",
"applyAndContinue": "Apply & Continue",
"exportAndContinue": "Export & Continue",
"language": { "language": {
"direction": "ltr" "direction": "ltr"
}, },
@ -3439,4 +3445,4 @@
}, },
"termsAndConditions": "Terms & Conditions", "termsAndConditions": "Terms & Conditions",
"logOut": "Log out" "logOut": "Log out"
} }

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { Modal, Text, Button, Group, Stack } from '@mantine/core'; import { Modal, Text, Button, Group, Stack } from '@mantine/core';
import { useNavigationGuard } from '../../contexts/NavigationContext'; import { useNavigationGuard } from '../../contexts/NavigationContext';
import { useTranslation } from 'react-i18next';
interface NavigationWarningModalProps { interface NavigationWarningModalProps {
onApplyAndContinue?: () => Promise<void>; onApplyAndContinue?: () => Promise<void>;
@ -11,6 +12,8 @@ const NavigationWarningModal = ({
onApplyAndContinue, onApplyAndContinue,
onExportAndContinue onExportAndContinue
}: NavigationWarningModalProps) => { }: NavigationWarningModalProps) => {
const { t } = useTranslation();
const { const {
showNavigationWarning, showNavigationWarning,
hasUnsavedChanges, hasUnsavedChanges,
@ -28,7 +31,7 @@ const NavigationWarningModal = ({
confirmNavigation(); confirmNavigation();
}; };
const handleApplyAndContinue = async () => { const _handleApplyAndContinue = async () => {
if (onApplyAndContinue) { if (onApplyAndContinue) {
await onApplyAndContinue(); await onApplyAndContinue();
} }
@ -52,55 +55,59 @@ const NavigationWarningModal = ({
<Modal <Modal
opened={showNavigationWarning} opened={showNavigationWarning}
onClose={handleKeepWorking} onClose={handleKeepWorking}
title="Unsaved Changes" title={t("unsavedChangesTitle", "Unsaved Changes")}
centered centered
size="lg"
closeOnClickOutside={false} closeOnClickOutside={false}
closeOnEscape={false} closeOnEscape={false}
> >
<Stack gap="md"> <Stack gap="md">
<Text> <Text>
You have unsaved changes to your PDF. What would you like to do? {t("unsavedChanges", "You have unsaved changes to your PDF. What would you like to do?")}
</Text> </Text>
<Group justify="flex-end" gap="sm">
<Button <Group justify="space-between" gap="sm">
variant="light"
color="gray"
onClick={handleKeepWorking}
>
Keep Working
</Button>
<Button <Button
variant="light" variant="light"
color="red" color="red"
onClick={handleDiscardChanges} onClick={handleDiscardChanges}
> >
Discard Changes {t("discardChanges", "Discard Changes")}
</Button> </Button>
{onApplyAndContinue && ( <Group gap="sm">
<Button <Button
variant="light" variant="light"
color="blue" color="var(--mantine-color-gray-8)"
onClick={handleApplyAndContinue} onClick={handleKeepWorking}
> >
Apply & Continue {t("keepWorking", "Keep Working")}
</Button> </Button>
)}
{/* TODO:: Add this back in when it works */}
{onExportAndContinue && ( {/* {onApplyAndContinue && (
<Button <Button
color="green" variant="light"
onClick={handleExportAndContinue} color="blue"
> onClick={handleApplyAndContinue}
Export & Continue >
</Button> {t("applyAndContinue", "Apply & Continue")}
)} </Button>
)} */}
{onExportAndContinue && (
<Button
onClick={handleExportAndContinue}
>
{t("exportAndContinue", "Export & Continue")}
</Button>
)}
</Group>
</Group> </Group>
</Stack> </Stack>
</Modal> </Modal>
); );
}; };
export default NavigationWarningModal; export default NavigationWarningModal;