From 981a29240a96eee92e7ccd1dd03ebc1ba3a4e605 Mon Sep 17 00:00:00 2001
From: Albina <alblupynos@gmail.com>
Date: Fri, 27 Sep 2024 13:19:58 +0300
Subject: [PATCH] OV-444: + add unsaved warning

---
 .../warning-modal/components/components.ts    |  1 +
 .../components/unsaved-warning-content.tsx    | 41 ++++++++++++++++
 .../warning-modal/warning-modal.tsx           | 13 +++--
 frontend/src/bundles/studio/pages/studio.tsx  | 48 ++++++++++++++++---
 frontend/src/bundles/studio/store/slice.ts    |  3 ++
 5 files changed, 93 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/bundles/studio/components/warning-modal/components/unsaved-warning-content.tsx

diff --git a/frontend/src/bundles/studio/components/warning-modal/components/components.ts b/frontend/src/bundles/studio/components/warning-modal/components/components.ts
index b6f205279..e2562a94a 100644
--- a/frontend/src/bundles/studio/components/warning-modal/components/components.ts
+++ b/frontend/src/bundles/studio/components/warning-modal/components/components.ts
@@ -1 +1,2 @@
+export { UnsavedWarningContent } from './unsaved-warning-content.js';
 export { WarningContent } from './warning-content.js';
diff --git a/frontend/src/bundles/studio/components/warning-modal/components/unsaved-warning-content.tsx b/frontend/src/bundles/studio/components/warning-modal/components/unsaved-warning-content.tsx
new file mode 100644
index 000000000..e4cdcc44c
--- /dev/null
+++ b/frontend/src/bundles/studio/components/warning-modal/components/unsaved-warning-content.tsx
@@ -0,0 +1,41 @@
+import {
+    Button,
+    Flex,
+    Heading,
+    Text,
+} from '~/bundles/common/components/components.js';
+
+type Properties = {
+    onCancel: () => void;
+    onSubmit: () => void;
+};
+
+const UnsavedWarningContent: React.FC<Properties> = ({
+    onCancel,
+    onSubmit,
+}) => {
+    return (
+        <>
+            <Heading variant="H3" color="typography.900" mb="20px">
+                Notice before you leave the page
+            </Heading>
+
+            <Text as="p" color="typography.600" mb="20px">
+                If you leave now all your unsaved changes will be lost. Please
+                save draft or submit to render before leaving.
+            </Text>
+
+            <Flex gap="10px" justify="end">
+                <Button label="Cancel" w="auto" onClick={onCancel} />
+                <Button
+                    label="Leave Anyway"
+                    w="auto"
+                    variant="secondaryOutlined"
+                    onClick={onSubmit}
+                />
+            </Flex>
+        </>
+    );
+};
+
+export { UnsavedWarningContent };
diff --git a/frontend/src/bundles/studio/components/warning-modal/warning-modal.tsx b/frontend/src/bundles/studio/components/warning-modal/warning-modal.tsx
index 253a14be2..0b8bb2923 100644
--- a/frontend/src/bundles/studio/components/warning-modal/warning-modal.tsx
+++ b/frontend/src/bundles/studio/components/warning-modal/warning-modal.tsx
@@ -6,23 +6,22 @@ import {
     ModalOverlay,
 } from '~/bundles/common/components/components.js';
 
-import { WarningContent } from './components/components.js';
-
 type Properties = {
     isOpen: boolean;
     onClose: () => void;
-    onSubmit: () => void;
 };
 
-const WarningModal: React.FC<Properties> = ({ isOpen, onClose, onSubmit }) => {
+const WarningModal: React.FC<React.PropsWithChildren<Properties>> = ({
+    isOpen,
+    onClose,
+    children,
+}) => {
     return (
         <BaseModal isOpen={isOpen} onClose={onClose} size="xl">
             <ModalOverlay />
             <ModalContent>
                 <ModalCloseButton />
-                <ModalBody p="40px">
-                    <WarningContent onCancel={onClose} onSubmit={onSubmit} />
-                </ModalBody>
+                <ModalBody p="40px">{children}</ModalBody>
             </ModalContent>
         </BaseModal>
     );
diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx
index 15dd38ece..6026cf22c 100644
--- a/frontend/src/bundles/studio/pages/studio.tsx
+++ b/frontend/src/bundles/studio/pages/studio.tsx
@@ -1,4 +1,5 @@
 import { type PlayerRef } from '@remotion/player';
+import { useBlocker } from 'react-router-dom';
 
 import { AudioPlayer } from '~/bundles/common/components/audio-player/audio-player.js';
 import {
@@ -30,6 +31,10 @@ import {
 } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
 import { notificationService } from '~/bundles/common/services/services.js';
+import {
+    UnsavedWarningContent,
+    WarningContent,
+} from '~/bundles/studio/components/warning-modal/components/components.js';
 
 import {
     PlayerControls,
@@ -71,6 +76,8 @@ const Studio: React.FC = () => {
         scriptPlayer,
         isVideoScriptsGenerationReady,
         isVideoScriptsGenerationPending,
+        isDraftSaved,
+        isSubmitToRender,
     } = useAppSelector(({ studio }) => studio);
 
     const playerReference = useRef<PlayerRef>(null);
@@ -118,7 +125,6 @@ const Studio: React.FC = () => {
                     message: NotificationMessage.VIDEO_SUBMITTED,
                     title: NotificationTitle.VIDEO_SUBMITTED,
                 });
-                navigate(AppRoute.ROOT);
             })
             .catch(() => {
                 notificationService.error({
@@ -127,7 +133,7 @@ const Studio: React.FC = () => {
                     title: NotificationTitle.VIDEO_SUBMIT_FAILED,
                 });
             });
-    }, [dispatch, navigate, scenes, scripts]);
+    }, [dispatch, scenes, scripts]);
 
     const handleSubmit = useCallback(() => {
         if (scenesExceedScripts(scenes, scripts)) {
@@ -211,6 +217,26 @@ const Studio: React.FC = () => {
 
     const { isPlaying, url } = scriptPlayer;
 
+    const blocker = useBlocker(
+        ({ currentLocation, nextLocation }) =>
+            !(isDraftSaved || isSubmitToRender) &&
+            currentLocation.pathname !== nextLocation.pathname,
+    );
+
+    const handleCloseUnsavedChangesModal = useCallback(() => {
+        blocker.reset?.();
+    }, [blocker]);
+
+    const handleSubmitUnsavedChangesModal = useCallback(() => {
+        blocker.proceed?.();
+    }, [blocker]);
+
+    useEffect(() => {
+        if (isSubmitToRender) {
+            navigate(AppRoute.ROOT);
+        }
+    }, [navigate, isSubmitToRender]);
+
     return (
         <>
             <Overlay isOpen={isVideoScriptsGenerationPending}>
@@ -223,11 +249,21 @@ const Studio: React.FC = () => {
                 display="flex"
                 flexDirection="column"
             >
+                <WarningModal isOpen={isModalOpen} onClose={handleCloseModal}>
+                    <WarningContent
+                        onCancel={handleCloseModal}
+                        onSubmit={handleConfirmSubmit}
+                    />
+                </WarningModal>
                 <WarningModal
-                    isOpen={isModalOpen}
-                    onClose={handleCloseModal}
-                    onSubmit={handleConfirmSubmit}
-                />
+                    isOpen={blocker.state === 'blocked'}
+                    onClose={handleCloseUnsavedChangesModal}
+                >
+                    <UnsavedWarningContent
+                        onCancel={handleCloseUnsavedChangesModal}
+                        onSubmit={handleSubmitUnsavedChangesModal}
+                    />
+                </WarningModal>
                 <Header
                     center={
                         <Button
diff --git a/frontend/src/bundles/studio/store/slice.ts b/frontend/src/bundles/studio/store/slice.ts
index c3b635479..f5c311a6f 100644
--- a/frontend/src/bundles/studio/store/slice.ts
+++ b/frontend/src/bundles/studio/store/slice.ts
@@ -91,6 +91,7 @@ type State = {
     videoSize: VideoPreviewT;
     videoName: string;
     isDraftSaved: boolean;
+    isSubmitToRender: boolean;
     videoId: string | null;
     voices: Voice[];
     ui: {
@@ -117,6 +118,7 @@ const initialState: State = {
     videoSize: VideoPreview.LANDSCAPE,
     videoName: 'Untitled Video',
     isDraftSaved: true,
+    isSubmitToRender: false,
     videoId: null,
     voices: [],
     ui: {
@@ -587,6 +589,7 @@ const { reducer, actions, name } = createSlice({
             state.dataStatus = DataStatus.PENDING;
         });
         builder.addCase(renderAvatar.fulfilled, (state) => {
+            state.isSubmitToRender = true;
             state.dataStatus = DataStatus.FULFILLED;
         });
         builder.addCase(renderAvatar.rejected, (state) => {