Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | 2x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 4x 3x 2x 2x 4x 2x 4x 2x 1x 1x 1x 3x 1x 6x | import { ChevronLeft } from "lucide-react";
import { FormEvent } from "react";
import { Navigate, useLocation, useNavigate, useSearchParams } from "react-router";
import { StateCode } from "shared-types";
import { UserRole } from "shared-types/events/legacy-user";
import { userRoleMap } from "shared-utils";
import { useGetUserDetails, useSubmitRoleRequests } from "@/api";
import {
banner,
Button,
LoadingSpinner,
SimplePageContainer,
SubNavHeader,
userPrompt,
} from "@/components";
import { convertStateAbbrToFullName } from "@/utils";
export const StateConfirmation = () => {
const navigate = useNavigate();
const { pathname } = useLocation();
const [searchParams] = useSearchParams();
const { mutateAsync: submitUserRequest, isLoading: isSubmitUserRequestLoading } =
useSubmitRoleRequests();
const { data: userDetails, isLoading: isUserLoading } = useGetUserDetails();
const roleToRequest = searchParams.get("role") as UserRole;
const statesParam = searchParams.get("states");
const statesToRequest: StateCode[] = statesParam ? (statesParam.split(",") as StateCode[]) : [];
const roleSelectionPath = `/signup/state/role?states=${statesParam}`;
if (isUserLoading) {
return <LoadingSpinner />;
}
if (!userDetails) {
return <Navigate to="/" />;
}
if (!roleToRequest) return <Navigate to={roleSelectionPath} />;
const onSubmit = async (event: FormEvent) => {
event.preventDefault();
const roleRequests = statesToRequest.map((state) =>
submitUserRequest({
email: userDetails.email,
role: roleToRequest,
state,
eventType: "user-role",
requestRoleChange: true,
}),
);
const results = await Promise.allSettled(roleRequests);
const failedRequests = results.filter((result) => result.status === "rejected");
if (failedRequests.length > 0) {
return banner({
variant: "destructive",
header: "Error submitting role requests",
body: "Some role requests could not be submitted. Please try again.",
pathnameToDisplayOn: pathname,
});
}
banner({
variant: "success",
header: "Submission Completed",
body: "Your submission has been received.",
pathnameToDisplayOn: "/profile",
});
return navigate("/profile");
};
const onCancel = () => {
userPrompt({
header: "Cancel role request?",
body: "Changes you made will not be saved.",
onAccept: () => navigate(roleSelectionPath),
onCancel: () => {},
acceptButtonText: "Confirm",
cancelButtonText: "Stay on Page",
});
};
return (
<div>
<SubNavHeader>
<div className="flex items-center">
<ChevronLeft
className="text-sky-700 w-6 h-6 mr-2 cursor-pointer"
onClick={() => navigate("/signup/state")}
/>
<h1 className="text-xl font-medium">Submit Role Request</h1>
</div>
</SubNavHeader>
<SimplePageContainer>
<div className="flex justify-center p-5 my-10 pb-10">
<div className="w-1/3">
<div className="py-3">
<h2 className="text-xl font-bold mb-2">
{statesToRequest.length > 1 ? "States / Territories:" : "State / Territory:"}
</h2>
<p className="text-xl italic">
{statesToRequest.map((state) => convertStateAbbrToFullName(state)).join(", ")}
</p>
</div>
<div className="py-3">
<h2 className="text-xl font-bold mb-2">User Role:</h2>
<p className="text-xl italic">{userRoleMap[roleToRequest]}</p>
<div className="py-4">
<Button
className="mr-3"
type="submit"
aria-label="Submit role request"
onClick={onSubmit}
disabled={isSubmitUserRequestLoading}
loading={isSubmitUserRequestLoading}
>
Submit
</Button>
<Button
variant="link"
onClick={onCancel}
type="button"
aria-label="Cancel role request"
disabled={isSubmitUserRequestLoading}
>
Cancel
</Button>
</div>
</div>
</div>
</div>
</SimplePageContainer>
</div>
);
};
|