Develop front-end pages & states for code mapping tool (UPLOAD flow) (#…

…17321)

* Develop front-end pages & states for code mapping tool (UPLOAD flow)
Fixes #16758

frontend-react/public/sitemap.xml

@@ -69,4 +69,7 @@
     <url>
         <loc>https://reportstream.cdc.gov/file-handler/validate</loc>
     </url>
+    <url>
+        <loc>https://reportstream.cdc.gov/onboarding/code-mapping</loc>
+    </url>
 </urlset>

frontend-react/src/AppRouter.tsx

@@ -92,6 +92,7 @@ const FacilityProviderSubmitterDetailsPage = lazy(
     () => import("./components/DataDashboard/FacilityProviderSubmitterDetails/FacilityProviderSubmitterDetails"),
 );
 const NewSettingPage = lazy(() => import("./components/Admin/NewSetting"));
+const CodeMappingPage = lazy(() => import("./pages/onboarding/CodeMappingPage"));
 
 const MainLayout = lazy(() => import("./layouts/Main/MainLayout"));
 
@@ -494,6 +495,20 @@ export const appRoutes: RouteObject[] = [
                     </RequireGate>
                 ),
             },
+            {
+                path: "onboarding",
+                element: (
+                    <RequireGate auth>
+                        <Outlet />
+                    </RequireGate>
+                ),
+                children: [
+                    {
+                        path: "code-mapping",
+                        element: <CodeMappingPage />,
+                    },
+                ],
+            },
             /* Handles any undefined route */
             {
                 path: "*",

frontend-react/src/components/CodeMapping/CodeMappingForm.tsx

@@ -0,0 +1,82 @@
+import { Button, ButtonGroup, FileInput } from "@trussworks/react-uswds";
+import { FormEventHandler, MouseEventHandler, type PropsWithChildren, useCallback } from "react";
+import CodeMappingResults from "./CodeMappingResults";
+import site from "../../content/site.json";
+import useCodeMappingFormSubmit from "../../hooks/api/UseCodeMappingFormSubmit/UseCodeMappingFormSubmit";
+import Spinner from "../Spinner";
+import { USLink } from "../USLink";
+
+export type CodeMappingFormProps = PropsWithChildren;
+
+const CodeMappingForm = (props: CodeMappingFormProps) => {
+    const { data, isPending, mutate } = useCodeMappingFormSubmit();
+    /**
+     * TODO: Implement submit handler
+     */
+    const onSubmitHandler = useCallback<FormEventHandler<HTMLFormElement>>(
+        (ev) => {
+            ev.preventDefault();
+            mutate();
+            return false;
+        },
+        [mutate],
+    );
+    const onBackHandler = useCallback<MouseEventHandler>((_ev) => {
+        window.history.back();
+    }, []);
+    const onCancelHandler = useCallback<MouseEventHandler>((_ev) => {
+        // Don't have a proper mechanism to cancel in-flight requests so refresh page
+        window.location.reload();
+    }, []);
+
+    return (
+        <>
+            <p className="font-sans-lg">
+                Check that your LOINC and SNOMED codes are mapped to conditions so ReportStream can accurately transform
+                your data
+            </p>
+            <p>
+                Follow <a href="/developer-resources/api/getting-started#2_4">these instructions</a> and use{" "}
+                <a href={site.assets.codeMapTemplate.path}>our template</a> to format your result and organism codes to
+                LOINC or SNOMED. Note: Local codes cannot be automatically mapped.
+            </p>
+            {data && <CodeMappingResults />}
+            {isPending && (
+                <>
+                    <Spinner />
+                    <p className="text-center">
+                        Checking your file for any unmapped codes that will <br /> prevent data from being reported
+                        successfully
+                    </p>
+                    <Button type={"button"} outline onClick={onCancelHandler}>
+                        Cancel
+                    </Button>
+                </>
+            )}
+            {!data && !isPending && (
+                <form onSubmit={onSubmitHandler}>
+                    <label className="usa-label" htmlFor="file-input-specific">
+                        Upload CSV file
+                    </label>
+                    <span className="usa-hint" id="file-input-specific-hint">
+                        Make sure your file has a .csv extension
+                    </span>
+                    <FileInput id={""} name={"file"} className="maxw-full" accept=".csv" />
+                    <ButtonGroup className="margin-top-5">
+                        <Button type={"button"} outline onClick={onBackHandler}>
+                            Back
+                        </Button>
+                        <Button type={"submit"}>Submit</Button>
+                    </ButtonGroup>
+                </form>
+            )}
+            {props.children}
+            <p className="margin-top-9">
+                Questions or feedback? Please email{" "}
+                <USLink href="mailto:reportstream@cdc.gov">reportstream@cdc.gov</USLink>
+            </p>
+        </>
+    );
+};
+
+export default CodeMappingForm;

frontend-react/src/components/CodeMapping/CodeMappingResults.tsx

@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from "react";
+
+export type CodeMappingResultsProps = PropsWithChildren;
+
+/**
+ * TODO: Implement result page
+ */
+const CodeMappingResults = (props: CodeMappingResultsProps) => <>TODO {props.children}</>;
+
+export default CodeMappingResults;

frontend-react/src/hooks/api/UseCodeMappingFormSubmit/UseCodeMappingFormSubmit.ts

@@ -0,0 +1,16 @@
+import { useMutation } from "@tanstack/react-query";
+
+/**
+ * TODO: Implement hook
+ */
+const useCodeMappingFormSubmit = () => {
+    const fn = async () => {
+        // Fake request until implementation
+        await new Promise((resolve) => setTimeout(resolve, 2500));
+    };
+    return useMutation({
+        mutationFn: fn,
+    });
+};
+
+export default useCodeMappingFormSubmit;

frontend-react/src/pages/onboarding/CodeMappingPage.tsx

@@ -0,0 +1,16 @@
+import type { PropsWithChildren } from "react";
+import CodeMappingForm from "../../components/CodeMapping/CodeMappingForm";
+
+export type CodeMappingPageProps = PropsWithChildren;
+
+const CodeMappingPage = (props: CodeMappingPageProps) => {
+    return (
+        <>
+            <h1>Code mapping tool</h1>
+            <CodeMappingForm />
+            {props.children}
+        </>
+    );
+};
+
+export default CodeMappingPage;