Implement continue on connect + nda
Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
import { downloadFile, formatError } from "@probo/helpers";
|
import { downloadFile, formatError } from "@probo/helpers";
|
||||||
import { useTranslate } from "@probo/i18n";
|
import { useTranslate } from "@probo/i18n";
|
||||||
|
import { UnAuthenticatedError } from "@probo/relay";
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
IconArrowInbox,
|
IconArrowInbox,
|
||||||
@@ -8,12 +9,12 @@ import {
|
|||||||
Spinner,
|
Spinner,
|
||||||
useToast,
|
useToast,
|
||||||
} from "@probo/ui";
|
} from "@probo/ui";
|
||||||
import { use, useState } from "react";
|
import { useState } from "react";
|
||||||
import { useFragment, useMutation } from "react-relay";
|
import { useFragment, useMutation } from "react-relay";
|
||||||
|
import { useLocation, useNavigate } from "react-router";
|
||||||
import { graphql } from "relay-runtime";
|
import { graphql } from "relay-runtime";
|
||||||
|
|
||||||
import { useMutationWithToasts } from "#/hooks/useMutationWithToast";
|
import { useMutationWithToasts } from "#/hooks/useMutationWithToast";
|
||||||
import { Viewer } from "#/providers/Viewer";
|
|
||||||
|
|
||||||
import type { DocumentRow_requestAccessMutation } from "./__generated__/DocumentRow_requestAccessMutation.graphql";
|
import type { DocumentRow_requestAccessMutation } from "./__generated__/DocumentRow_requestAccessMutation.graphql";
|
||||||
import type { DocumentRowDownloadMutation } from "./__generated__/DocumentRowDownloadMutation.graphql";
|
import type { DocumentRowDownloadMutation } from "./__generated__/DocumentRowDownloadMutation.graphql";
|
||||||
@@ -50,8 +51,9 @@ const documentRowFragment = graphql`
|
|||||||
|
|
||||||
export function DocumentRow(props: { document: DocumentRowFragment$key }) {
|
export function DocumentRow(props: { document: DocumentRowFragment$key }) {
|
||||||
const { __ } = useTranslate();
|
const { __ } = useTranslate();
|
||||||
const viewer = use(Viewer);
|
|
||||||
const { toast } = useToast();
|
const { toast } = useToast();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
const document = useFragment(documentRowFragment, props.document);
|
const document = useFragment(documentRowFragment, props.document);
|
||||||
const [hasRequested, setHasRequested] = useState(
|
const [hasRequested, setHasRequested] = useState(
|
||||||
@@ -87,6 +89,13 @@ export function DocumentRow(props: { document: DocumentRowFragment$key }) {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
onError: (error) => {
|
onError: (error) => {
|
||||||
|
if (error instanceof UnAuthenticatedError) {
|
||||||
|
const searchParams = new URLSearchParams([[
|
||||||
|
"continue", window.location.origin + location.pathname + location.search,
|
||||||
|
]]);
|
||||||
|
void navigate(`/connect?${searchParams.toString()}`);
|
||||||
|
}
|
||||||
|
|
||||||
toast({
|
toast({
|
||||||
title: __("Error"),
|
title: __("Error"),
|
||||||
description: error.message ?? __("Cannot request access"),
|
description: error.message ?? __("Cannot request access"),
|
||||||
@@ -127,8 +136,7 @@ export function DocumentRow(props: { document: DocumentRowFragment$key }) {
|
|||||||
{downloading ? __("Downloading") : __("Download")}
|
{downloading ? __("Downloading") : __("Download")}
|
||||||
</Button>
|
</Button>
|
||||||
)
|
)
|
||||||
: viewer
|
: (
|
||||||
? (
|
|
||||||
<Button
|
<Button
|
||||||
disabled={hasRequested || isRequestingAccess}
|
disabled={hasRequested || isRequestingAccess}
|
||||||
className="w-full md:w-max"
|
className="w-full md:w-max"
|
||||||
@@ -138,16 +146,6 @@ export function DocumentRow(props: { document: DocumentRowFragment$key }) {
|
|||||||
>
|
>
|
||||||
{hasRequested ? __("Access requested") : __("Request access")}
|
{hasRequested ? __("Access requested") : __("Request access")}
|
||||||
</Button>
|
</Button>
|
||||||
)
|
|
||||||
: (
|
|
||||||
<Button
|
|
||||||
className="w-full md:w-max"
|
|
||||||
variant="secondary"
|
|
||||||
icon={IconLock}
|
|
||||||
to="/connect"
|
|
||||||
>
|
|
||||||
{hasRequested ? __("Access requested") : __("Request access")}
|
|
||||||
</Button>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
41
apps/trust/src/components/RootErrorBoundary.tsx
Normal file
41
apps/trust/src/components/RootErrorBoundary.tsx
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import { NDASignatureRequiredError, UnAuthenticatedError } from "@probo/relay";
|
||||||
|
import { Navigate, useLocation, useRouteError } from "react-router";
|
||||||
|
|
||||||
|
import { getPathPrefix } from "#/utils/pathPrefix";
|
||||||
|
|
||||||
|
import { PageError } from "./PageError";
|
||||||
|
|
||||||
|
export function RootErrorBoundary() {
|
||||||
|
const error = useRouteError();
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
const search = new URLSearchParams();
|
||||||
|
|
||||||
|
if (location.pathname !== getPathPrefix() || location.search !== "") {
|
||||||
|
search.set("continue", window.location.href);
|
||||||
|
}
|
||||||
|
|
||||||
|
const queryString = search.toString();
|
||||||
|
|
||||||
|
if (error instanceof UnAuthenticatedError) {
|
||||||
|
return (
|
||||||
|
<Navigate to={{
|
||||||
|
pathname: "/connect",
|
||||||
|
search: queryString ? "?" + queryString : "",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error instanceof NDASignatureRequiredError) {
|
||||||
|
return (
|
||||||
|
<Navigate to={{
|
||||||
|
pathname: "/nda",
|
||||||
|
search: queryString ? "?" + queryString : "",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <PageError error={error instanceof Error ? error : new Error("unknown error")} />;
|
||||||
|
}
|
||||||
@@ -8,13 +8,14 @@ import {
|
|||||||
usePreloadedQuery,
|
usePreloadedQuery,
|
||||||
useRefetchableFragment,
|
useRefetchableFragment,
|
||||||
} from "react-relay";
|
} from "react-relay";
|
||||||
import { Navigate, useNavigate } from "react-router";
|
import { Navigate, useSearchParams } from "react-router";
|
||||||
import { graphql } from "relay-runtime";
|
import { graphql } from "relay-runtime";
|
||||||
import { useWindowSize } from "usehooks-ts";
|
import { useWindowSize } from "usehooks-ts";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
|
|
||||||
import { PDFPreview } from "#/components/PDFPreview";
|
import { PDFPreview } from "#/components/PDFPreview";
|
||||||
import { useFormWithSchema } from "#/hooks/useFormWithSchema";
|
import { useFormWithSchema } from "#/hooks/useFormWithSchema";
|
||||||
|
import { getPathPrefix } from "#/utils/pathPrefix";
|
||||||
|
|
||||||
import type { NDAPageAcceptElectronicSignatureMutation } from "./__generated__/NDAPageAcceptElectronicSignatureMutation.graphql";
|
import type { NDAPageAcceptElectronicSignatureMutation } from "./__generated__/NDAPageAcceptElectronicSignatureMutation.graphql";
|
||||||
import type { NDAPageFragment$key } from "./__generated__/NDAPageFragment.graphql";
|
import type { NDAPageFragment$key } from "./__generated__/NDAPageFragment.graphql";
|
||||||
@@ -88,8 +89,11 @@ export function NDAPage(props: {
|
|||||||
queryRef: PreloadedQuery<NDAPageQueryType>;
|
queryRef: PreloadedQuery<NDAPageQueryType>;
|
||||||
}) {
|
}) {
|
||||||
const { __ } = useTranslate();
|
const { __ } = useTranslate();
|
||||||
const navigate = useNavigate();
|
const [searchParams] = useSearchParams();
|
||||||
const documentViewedRef = useRef(false);
|
const documentViewedRef = useRef(false);
|
||||||
|
const { width } = useWindowSize();
|
||||||
|
const isMobile = width < 1100;
|
||||||
|
const isDesktop = !isMobile;
|
||||||
|
|
||||||
const queryData = usePreloadedQuery(ndaPageQuery, props.queryRef);
|
const queryData = usePreloadedQuery(ndaPageQuery, props.queryRef);
|
||||||
const trustCenter = queryData.currentTrustCenter;
|
const trustCenter = queryData.currentTrustCenter;
|
||||||
@@ -101,19 +105,14 @@ export function NDAPage(props: {
|
|||||||
);
|
);
|
||||||
const ndaSignature = data.nonDisclosureAgreement.viewerSignature;
|
const ndaSignature = data.nonDisclosureAgreement.viewerSignature;
|
||||||
|
|
||||||
const { width } = useWindowSize();
|
const continueUrlParam = searchParams.get("continue");
|
||||||
const isMobile = width < 1100;
|
let safeContinueUrl: string;
|
||||||
const isDesktop = !isMobile;
|
if (continueUrlParam) {
|
||||||
|
const continueUrl = new URL(continueUrlParam);
|
||||||
const {
|
safeContinueUrl = window.location.origin + continueUrl.pathname + continueUrl.search;
|
||||||
handleSubmit: handleSubmitWrapper,
|
} else {
|
||||||
register,
|
safeContinueUrl = window.location.origin + getPathPrefix();
|
||||||
formState,
|
}
|
||||||
} = useFormWithSchema(schema, {
|
|
||||||
defaultValues: {
|
|
||||||
fullName: viewer?.fullName,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const [acceptSignature, isAccepting] = useMutation<NDAPageAcceptElectronicSignatureMutation>(
|
const [acceptSignature, isAccepting] = useMutation<NDAPageAcceptElectronicSignatureMutation>(
|
||||||
acceptElectronicSignatureMutation,
|
acceptElectronicSignatureMutation,
|
||||||
@@ -130,11 +129,21 @@ export function NDAPage(props: {
|
|||||||
const isFailed = ndaSignature?.status === "FAILED";
|
const isFailed = ndaSignature?.status === "FAILED";
|
||||||
const isCompleted = ndaSignature?.status === "COMPLETED";
|
const isCompleted = ndaSignature?.status === "COMPLETED";
|
||||||
|
|
||||||
|
const {
|
||||||
|
handleSubmit: handleSubmitWrapper,
|
||||||
|
register,
|
||||||
|
formState,
|
||||||
|
} = useFormWithSchema(schema, {
|
||||||
|
defaultValues: {
|
||||||
|
fullName: viewer?.fullName,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isCompleted) {
|
if (isCompleted) {
|
||||||
void navigate("/overview", { replace: true });
|
window.location.href = safeContinueUrl;
|
||||||
}
|
}
|
||||||
}, [isCompleted, navigate]);
|
}, [isCompleted, safeContinueUrl]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isProcessing) return;
|
if (!isProcessing) return;
|
||||||
|
|||||||
@@ -70,7 +70,7 @@ const store = new Store(source, {
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const consoleEnvironment = new Environment({
|
export const consoleEnvironment = new Environment({
|
||||||
configName: "trust",
|
configName: "compliance-page",
|
||||||
network: Network.create(makeFetchQuery(buildEndpoint())),
|
network: Network.create(makeFetchQuery(buildEndpoint())),
|
||||||
store,
|
store,
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import {
|
|||||||
} from "@probo/routes";
|
} from "@probo/routes";
|
||||||
import { Fragment } from "react";
|
import { Fragment } from "react";
|
||||||
import { loadQuery } from "react-relay";
|
import { loadQuery } from "react-relay";
|
||||||
import { createBrowserRouter, redirect, useRouteError } from "react-router";
|
import { createBrowserRouter, redirect } from "react-router";
|
||||||
|
|
||||||
import { MainLayout } from "#/layouts/MainLayout";
|
import { MainLayout } from "#/layouts/MainLayout";
|
||||||
import { DocumentsPage } from "#/pages/DocumentsPage";
|
import { DocumentsPage } from "#/pages/DocumentsPage";
|
||||||
@@ -20,19 +20,11 @@ import {
|
|||||||
} from "#/queries/TrustGraph";
|
} from "#/queries/TrustGraph";
|
||||||
|
|
||||||
import { PageError } from "./components/PageError";
|
import { PageError } from "./components/PageError";
|
||||||
|
import { RootErrorBoundary } from "./components/RootErrorBoundary";
|
||||||
import { MainSkeleton } from "./components/Skeletons/MainSkeleton";
|
import { MainSkeleton } from "./components/Skeletons/MainSkeleton";
|
||||||
import { TabSkeleton } from "./components/Skeletons/TabSkeleton";
|
import { TabSkeleton } from "./components/Skeletons/TabSkeleton";
|
||||||
import { consoleEnvironment } from "./providers/RelayProviders";
|
import { consoleEnvironment } from "./providers/RelayProviders";
|
||||||
|
|
||||||
/**
|
|
||||||
* Top level error boundary
|
|
||||||
*/
|
|
||||||
function ErrorBoundary() {
|
|
||||||
const error = useRouteError();
|
|
||||||
|
|
||||||
return <PageError error={error instanceof Error ? error : new Error("unkown error")} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
Component: lazy(() => import("#/pages/auth/AuthLayoutLoader")),
|
Component: lazy(() => import("#/pages/auth/AuthLayoutLoader")),
|
||||||
@@ -54,12 +46,12 @@ const routes = [
|
|||||||
throw redirect("/overview");
|
throw redirect("/overview");
|
||||||
},
|
},
|
||||||
Component: Fragment,
|
Component: Fragment,
|
||||||
ErrorBoundary: ErrorBoundary,
|
ErrorBoundary: RootErrorBoundary,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/nda",
|
path: "/nda",
|
||||||
Component: lazy(() => import("#/pages/NDAPageLoader")),
|
Component: lazy(() => import("#/pages/NDAPageLoader")),
|
||||||
ErrorBoundary: ErrorBoundary,
|
ErrorBoundary: RootErrorBoundary,
|
||||||
},
|
},
|
||||||
// Custom domain routes (subdomain-based)
|
// Custom domain routes (subdomain-based)
|
||||||
{
|
{
|
||||||
@@ -69,7 +61,7 @@ const routes = [
|
|||||||
),
|
),
|
||||||
Component: withQueryRef(MainLayout),
|
Component: withQueryRef(MainLayout),
|
||||||
Fallback: MainSkeleton,
|
Fallback: MainSkeleton,
|
||||||
ErrorBoundary: ErrorBoundary,
|
ErrorBoundary: RootErrorBoundary,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: "",
|
path: "",
|
||||||
@@ -85,7 +77,7 @@ const routes = [
|
|||||||
),
|
),
|
||||||
Component: withQueryRef(MainLayout),
|
Component: withQueryRef(MainLayout),
|
||||||
Fallback: MainSkeleton,
|
Fallback: MainSkeleton,
|
||||||
ErrorBoundary: ErrorBoundary,
|
ErrorBoundary: RootErrorBoundary,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: "",
|
path: "",
|
||||||
@@ -104,7 +96,7 @@ const routes = [
|
|||||||
),
|
),
|
||||||
Component: withQueryRef(MainLayout),
|
Component: withQueryRef(MainLayout),
|
||||||
Fallback: MainSkeleton,
|
Fallback: MainSkeleton,
|
||||||
ErrorBoundary: ErrorBoundary,
|
ErrorBoundary: RootErrorBoundary,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: "",
|
path: "",
|
||||||
|
|||||||
@@ -6,6 +6,14 @@ export class UnAuthenticatedError extends Error {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export class NDASignatureRequiredError extends Error {
|
||||||
|
constructor(message?: string) {
|
||||||
|
super(message || "NDA_SIGNATURE_REQUIRED");
|
||||||
|
this.name = "NDASignatureRequiredError";
|
||||||
|
Object.setPrototypeOf(this, NDASignatureRequiredError.prototype);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export class InternalServerError extends Error {
|
export class InternalServerError extends Error {
|
||||||
constructor() {
|
constructor() {
|
||||||
super("INTERNAL_SERVER_ERROR");
|
super("INTERNAL_SERVER_ERROR");
|
||||||
|
|||||||
Reference in New Issue
Block a user