DAP-1114: EDRMS instructions page

desktop/src/renderer/src/App.tsx

@@ -5,6 +5,7 @@ import { ToastContainer } from "react-toastify";
 import { SideNav, VPNPopup } from "./components";
 import { LeavePageModal } from "./components/LeavePageModal";
 import {
+  EdrmsInstructionsPage,
   FileListPage,
   HomePage,
   LanInstructionsPage,
@@ -127,6 +128,9 @@ function App(): JSX.Element {
             {currentPath === "/send-records/lan/instructions" && (
               <LanInstructionsPage />
             )}
+            {currentPath === "/send-records/edrms/instructions" && (
+              <EdrmsInstructionsPage />
+            )}
           </Box>
         </Context.Provider>
         <ToastContainer

desktop/src/renderer/src/pages/SendRecords.tsx

@@ -63,7 +63,15 @@ export const SendRecordsPage = () => {
                 <ComputerIcon sx={{ color: theme.palette.info.contrastText }} />
                 <Typography variant="h3">Send records from EDRMS</Typography>
               </Stack>
-              <Button style={{ width: "fit-content" }}>Start</Button>
+              <Button
+                onPress={() => {
+                  if (setCurrentPath)
+                    setCurrentPath("/send-records/edrms/instructions");
+                }}
+                style={{ width: "fit-content" }}
+              >
+                Start
+              </Button>
             </Stack>
           </Stack>
           {/* Note */}

desktop/src/renderer/src/pages/transfers/EdrmsInstructions.tsx

@@ -0,0 +1,79 @@
+import { Button } from "@bcgov/design-system-react-components";
+import { Box, Grid2 as Grid, Stack, Typography, useTheme } from "@mui/material";
+import { Context } from "../../App";
+import { useContext } from "react";
+
+export const EdrmsInstructionsPage = () => {
+  const theme = useTheme();
+
+  const { setCurrentPath } = useContext(Context) ?? {};
+
+  const goToTransferPage = () => {
+    if (setCurrentPath) setCurrentPath("/send-records/edrms");
+  };
+
+  const NoteBlock = () => {
+    return (
+      <Stack
+        gap={2}
+        sx={{
+          padding: 2,
+          background: theme.palette.info.main,
+          border: "1px solid",
+          borderColor: theme.palette.info.dark,
+          borderRadius: "5px",
+        }}
+      >
+        <Typography variant="h4">For an optimal experience...</Typography>
+        <ul>
+          <li>
+            Keep the DATS app open for the duration of the process, including
+            during long file uploading times.
+          </li>
+          <li>
+            <Typography variant="h4">
+              Closing the application or navigating elsewhere in DATS during
+              your transfer process will terminate the transfer. Progress will
+              not be saved.
+            </Typography>
+          </li>
+        </ul>
+      </Stack>
+    );
+  };
+
+  return (
+    <Grid container>
+      <Grid size={2} />
+      <Grid size={8} sx={{ paddingTop: 3 }}>
+        <Stack gap={3}>
+          <Typography variant="h2">Send records from EDRMS</Typography>
+          <Stack gap={2}>
+            <Typography variant="h3">Getting started</Typography>
+            <Typography>
+              Before you start the process, ensure you have the following
+              documents:
+            </Typography>
+            <ul>
+              <li>EDRMS Dataport text file</li>
+              <li>Approved EDRMS list file</li>
+              <li>Transfer form (ARS 617)</li>
+            </ul>
+            <Typography>
+              You should also be ready to relink any folders whose names have
+              changed since your file list was created.
+            </Typography>
+          </Stack>
+          {/* Note */}
+          <NoteBlock />
+          <Box sx={{ display: "flex", justifyContent: "right" }}>
+            <Button onPress={goToTransferPage} style={{ width: "fit-content" }}>
+              Start
+            </Button>
+          </Box>
+        </Stack>
+      </Grid>
+      <Grid size={2} />
+    </Grid>
+  );
+};

desktop/src/renderer/src/pages/transfers/index.ts

@@ -1,2 +1,3 @@
 export * from "./LanInstructions";
+export * from "./EdrmsInstructions";
 export * from "./LanTransfer";