Redirect if user not logged in when trying to claim ticket (#2192)

If the user is not logged in when trying to claim a ticket, redirect them to the login/register screen, and redirect them back to the claim after they sign in. Also added the claim link to the Podbox UI, to make it easier for Podbox admins to find claim links.
proofcarryingdata · Jan 16, 2025 · e8553f2 · e8553f2
1 parent 157a4ed
commit e8553f2
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 27 deletions.
diff --git a/apps/generic-issuance-client/src/pages/pipeline/PipelineDetailSection.tsx b/apps/generic-issuance-client/src/pages/pipeline/PipelineDetailSection.tsx
@@ -1,4 +1,3 @@
-import { ExternalLinkIcon } from "@chakra-ui/icons";
 import {
   Accordion,
   AccordionButton,
@@ -80,24 +79,40 @@ export function PipelineDetailSection({
               {pipelineInfo.feeds &&
                 pipelineInfo.feeds.map((feed, i) => (
                   <Box key={feed.url} mb={i === 0 ? 0 : 2}>
-                    <PodLink
-                      hideIcon
-                      isExternal
-                      to={`${
-                        process.env.PASSPORT_CLIENT_URL
-                      }/#/add-subscription?url=${encodeURIComponent(feed.url)}`}
-                    >
-                      <Button colorScheme="green">
-                        <Box mr={2}>{feed.name} Feed for Zupass</Box>{" "}
-                        <ExternalLinkIcon mx="2px" />
-                      </Button>
-                    </PodLink>
-                    <Box ml={4} display="inline-block"></Box>
-                    {isAdminView && (
-                      <PodLink to={feed.url} isExternal={true}>
-                        Feed Link
-                      </PodLink>
-                    )}
+                    <UnorderedList spacing={1}>
+                      <ListItem>
+                        <PodLink
+                          hideIcon
+                          isExternal
+                          to={`${
+                            process.env.PASSPORT_CLIENT_URL
+                          }/#/add-subscription?url=${encodeURIComponent(
+                            feed.url
+                          )}`}
+                        >
+                          Subscribe to Feed in Zupass
+                        </PodLink>
+                      </ListItem>
+                      <ListItem>
+                        <PodLink
+                          to={`${
+                            process.env.PASSPORT_CLIENT_URL
+                          }/#/claim?type=ticket&feedUrl=${encodeURIComponent(
+                            feed.url
+                          )}`}
+                          isExternal={true}
+                        >
+                          Claim Single Ticket in Zupass
+                        </PodLink>
+                      </ListItem>
+                      {isAdminView && (
+                        <ListItem>
+                          <PodLink to={feed.url} isExternal={true}>
+                            Direct Feed Link
+                          </PodLink>
+                        </ListItem>
+                      )}
+                    </UnorderedList>
                   </Box>
                 ))}
             </SectionContainer>

diff --git a/apps/passport-client/components/screens/ClaimScreen.tsx b/apps/passport-client/components/screens/ClaimScreen.tsx
@@ -28,7 +28,13 @@ import { NewModals } from "../../new-components/shared/Modals/NewModals";
 import { NewLoader } from "../../new-components/shared/NewLoader";
 import { Typography } from "../../new-components/shared/Typography";
 import { appConfig } from "../../src/appConfig";
-import { useCredentialManager, useDispatch, useSelf } from "../../src/appHooks";
+import {
+  useCredentialManager,
+  useDispatch,
+  useLoginIfNoSelf,
+  useSelf
+} from "../../src/appHooks";
+import { pendingRequestKeys } from "../../src/sessionStorage";
 import { Spacer } from "../core";
 import { PCDCard } from "../shared/PCDCard";
 
@@ -37,6 +43,8 @@ const ClaimRequestSchema = v.object({
   type: v.literal("ticket")
 });
 
+export type ClaimRequest = v.InferOutput<typeof ClaimRequestSchema>;
+
 function validateRequest(
   params: URLSearchParams
 ): v.SafeParseResult<typeof ClaimRequestSchema> {
@@ -53,6 +61,11 @@ export function ClaimScreen(): JSX.Element | null {
   const request = validateRequest(params);
   const queryClient = new QueryClient();
 
+  useLoginIfNoSelf(
+    pendingRequestKeys.claimTicket,
+    request.success ? request.output : undefined
+  );
+
   return (
     <div>
       {request.success &&

diff --git a/apps/passport-client/new-components/screens/Login/NewLoginInterstitialScreen.tsx b/apps/passport-client/new-components/screens/Login/NewLoginInterstitialScreen.tsx
@@ -1,3 +1,4 @@
+import { assertUnreachable } from "@pcd/util";
 import { useLayoutEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
@@ -91,7 +92,17 @@ export function NewLoginInterstitialScreen(): JSX.Element {
             });
             break;
           }
+          case "claimTicket": {
+            console.log("Redirecting to claim ticket screen");
+            const encReq = new URLSearchParams(
+              JSON.parse(pendingRequest.value)
+            ).toString();
+            clearAllPendingRequests();
+            navigate(`/claim?${encReq}`, { replace: true });
+            break;
+          }
           default:
+            assertUnreachable(pendingRequest.key);
             window.location.hash = "#/";
         }
       }

diff --git a/apps/passport-client/new-components/screens/Login/NewLoginScreen.tsx b/apps/passport-client/new-components/screens/Login/NewLoginScreen.tsx
@@ -14,6 +14,7 @@ import {
   pendingRequestKeys,
   setPendingAddRequest,
   setPendingAddSubscriptionRequest,
+  setPendingClaimTicketRequest,
   setPendingGenericIssuanceCheckinRequest,
   setPendingGetWithoutProvingRequest,
   setPendingProofRequest,
@@ -55,6 +56,8 @@ export const NewLoginScreen = (): JSX.Element => {
   const pendingGenericIssuanceCheckinRequest = query?.get(
     pendingRequestKeys.genericIssuanceCheckin
   );
+  const pendingClaimTicketRequest = query?.get(pendingRequestKeys.claimTicket);
+
   useEffect(() => {
     let pendingRequestForLogging: string | undefined = undefined;
 
@@ -81,6 +84,9 @@ export const NewLoginScreen = (): JSX.Element => {
         pendingGenericIssuanceCheckinRequest
       );
       pendingRequestForLogging = pendingRequestKeys.genericIssuanceCheckin;
+    } else if (pendingClaimTicketRequest) {
+      setPendingClaimTicketRequest(pendingClaimTicketRequest);
+      pendingRequestForLogging = pendingRequestKeys.claimTicket;
     }
 
     if (pendingRequestForLogging) {
@@ -95,7 +101,8 @@ export const NewLoginScreen = (): JSX.Element => {
     pendingViewSubscriptionsRequest,
     pendingAddSubscriptionRequest,
     pendingViewFrogCryptoRequest,
-    pendingGenericIssuanceCheckinRequest
+    pendingGenericIssuanceCheckinRequest,
+    pendingClaimTicketRequest
   ]);
 
   const suggestedEmail = query?.get("email");

diff --git a/apps/passport-client/src/appHooks.ts b/apps/passport-client/src/appHooks.ts
@@ -16,6 +16,7 @@ import { SemaphoreIdentityPCD } from "@pcd/semaphore-identity-pcd";
 import { Identity } from "@semaphore-protocol/identity";
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
+import { ClaimRequest } from "../components/screens/ClaimScreen";
 import {
   Dispatcher,
   StateContext,
@@ -337,7 +338,7 @@ export function useLaserScannerKeystrokeInput(): string {
 
 export function useLoginIfNoSelf(
   key: string,
-  request?: PCDRequest | string
+  request?: PCDRequest | string | ClaimRequest
 ): void {
   const self = useSelf();
   const userForcedToLogout = useUserForcedToLogout();

diff --git a/apps/passport-client/src/sessionStorage.ts b/apps/passport-client/src/sessionStorage.ts
@@ -7,6 +7,7 @@ export function clearAllPendingRequests(): void {
   clearPendingAddSubscriptionRequest();
   clearPendingGenericIssuanceCheckinRequest();
   clearPendingAuthenticateIFrameRequest();
+  clearPendingClaimTicketRequest();
 }
 
 export function hasPendingRequest(): boolean {
@@ -19,11 +20,12 @@ export function hasPendingRequest(): boolean {
     getPendingAddSubscriptionPageRequest() ||
     getPendingViewFrogCryptoPageRequest() ||
     getPendingGenericIssuanceCheckinRequest() ||
-    getPendingAuthenticateIFrameRequest()
+    getPendingAuthenticateIFrameRequest() ||
+    getPendingClaimTicketRequest()
   );
 }
 
-export const pendingRequestKeys: Record<string, string> = {
+export const pendingRequestKeys = {
   getWithoutProving: "getWithoutProvingRequest",
   add: "pendingAddRequest",
   halo: "pendingHaloRequest",
@@ -32,7 +34,8 @@ export const pendingRequestKeys: Record<string, string> = {
   addSubscription: "pendingAddSubscription",
   viewFrogCrypto: "pendingViewFrogCrypto",
   genericIssuanceCheckin: "pendingGenericIssuanceCheckin",
-  authenticateIFrame: "pendingAuthenticateIFrame"
+  authenticateIFrame: "pendingAuthenticateIFrame",
+  claimTicket: "pendingClaimTicket"
 } as const;
 
 export function setPendingGetWithoutProvingRequest(request: string): void {
@@ -154,14 +157,26 @@ export function getPendingAuthenticateIFrameRequest(): string | undefined {
   return value ?? undefined;
 }
 
+export function setPendingClaimTicketRequest(request: string): void {
+  sessionStorage.setItem(pendingRequestKeys.claimTicket, request);
+}
+
+export function clearPendingClaimTicketRequest(): void {
+  sessionStorage.removeItem(pendingRequestKeys.claimTicket);
+}
+
+export function getPendingClaimTicketRequest(): string | undefined {
+  const value = sessionStorage.getItem(pendingRequestKeys.claimTicket);
+  return value ?? undefined;
+}
+
 /**
  * Gets any pending request, if any. Returns undefined if none.
  */
 export function getPendingRequest():
   | { key: keyof typeof pendingRequestKeys; value: string }
   | undefined {
-  for (const key in pendingRequestKeys) {
-    const sessionStorageKey = pendingRequestKeys[key];
+  for (const [key, sessionStorageKey] of Object.entries(pendingRequestKeys)) {
     const item = sessionStorage.getItem(sessionStorageKey);
     if (item) {
       return {