UI Phase2 - Adding new screens

apps/passport-client/components/screens/LoginScreens/NewOneClickLoginScreen.tsx

@@ -1,6 +1,6 @@
 import { requestGenericIssuanceTicketPreviews } from "@pcd/passport-interface";
 import { Button, Spacer } from "@pcd/passport-ui";
-import { IPODTicketData } from "@pcd/pod-ticket-pcd";
+import { IPODTicketData, PODTicketPCD } from "@pcd/pod-ticket-pcd";
 import { PODTicketCardBodyImpl } from "@pcd/pod-ticket-pcd-ui";
 import { useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
@@ -150,6 +150,8 @@ export function NewOneClickLoginScreen(): JSX.Element | null {
                       </CardHeader>
                       <PODTicketCardBodyImpl
                         idBasedVerifyURL=""
+                        // TODO FIX THIS!!!!!
+                        pcd={ticket as unknown as PODTicketPCD}
                         ticketData={ticket}
                         key={ticket.ticketId}
                       />

apps/passport-client/components/shared/AppContainer.tsx

@@ -12,10 +12,14 @@ import { ScreenLoader } from "./ScreenLoader";
 // Wrapper for all screens.
 export function AppContainer({
   children,
-  bg
+  bg,
+  fullscreen,
+  noPadding
 }: {
   bg: "primary" | "gray";
   children?: ReactNode;
+  fullscreen?: boolean;
+  noPadding?: boolean;
 }): JSX.Element {
   const dispatch = useDispatch();
   const error = useAppError();
@@ -29,10 +33,10 @@ export function AppContainer({
   const col =
     bg === "gray" ? "var(--dot-pattern-bg)" : "var(--bg-dark-primary)";
   return (
-    <>
+    <Container $fullscreen={!!fullscreen}>
       <GlobalBackground color={col} />
       <Background>
-        <CenterColumn>
+        <CenterColumn defaultPadding={!noPadding}>
           {children && (
             <Toaster
               toastOptions={{
@@ -49,7 +53,7 @@ export function AppContainer({
           {error && <ErrorPopup error={error} onClose={onClose} />}
         </CenterColumn>
       </Background>
-    </>
+    </Container>
   );
 }
 
@@ -64,7 +68,7 @@ export const Background = styled.div`
   min-height: 100%;
 `;
 
-export const CenterColumn = styled.div`
+export const CenterColumn = styled.div<{ defaultPadding: boolean }>`
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -73,5 +77,15 @@ export const CenterColumn = styled.div`
   max-width: 420px;
   margin: 0 auto;
   position: relative;
-  padding: 16px;
+  ${({ defaultPadding }): string => (defaultPadding ? "padding: 16px;" : "")}
+`;
+
+const Container = styled.div<{ $fullscreen: boolean }>`
+  ${({ $fullscreen }): string =>
+    $fullscreen
+      ? `
+          display: flex;
+          height: 100vh;
+        `
+      : ""}
 `;

apps/passport-client/components/shared/PCDCard.tsx

@@ -3,11 +3,24 @@ import {
   TicketCategory,
   isEdDSATicketPCD
 } from "@pcd/eddsa-ticket-pcd";
-import { EdDSATicketPCDUI } from "@pcd/eddsa-ticket-pcd-ui";
+import {
+  EdDSATicketPCDUI,
+  TicketQR as EddsaTicketQR
+} from "@pcd/eddsa-ticket-pcd-ui";
 import { PCD, PCDUI } from "@pcd/pcd-types";
 import { isPODTicketPCD } from "@pcd/pod-ticket-pcd";
-import { PODTicketPCDUI } from "@pcd/pod-ticket-pcd-ui";
-import { memo, useCallback, useContext, useMemo, useState } from "react";
+import {
+  PODTicketPCDUI,
+  TicketQR as PODTicketQR
+} from "@pcd/pod-ticket-pcd-ui";
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
 import styled, { FlattenSimpleInterpolation, css } from "styled-components";
 import { usePCDCollection, useUserIdentityPCD } from "../../src/appHooks";
 import { StateContext } from "../../src/dispatch";
@@ -157,19 +170,89 @@ function getUI(
     : undefined;
 }
 
+const getURLsBasedOnCategory = (category: TicketCategory) => {
+  const ticketCategory = category;
+  const idBasedVerifyURL =
+    ticketCategory === TicketCategory.Devconnect
+      ? `${window.location.origin}/#/checkin-by-id`
+      : ticketCategory === TicketCategory.ZuConnect
+      ? `${window.location.origin}/#/verify`
+      : ticketCategory === TicketCategory.Generic
+      ? `${window.location.origin}/#/generic-checkin`
+      : undefined;
+
+  const verifyURL =
+    ticketCategory === TicketCategory.Generic
+      ? `${window.location.origin}/#/generic-checkin`
+      : `${window.location.origin}/#/verify`;
+  return { idBasedVerifyURL, verifyURL };
+};
+
+const QRContainer = styled.div`
+  height: 265px;
+  width: 265px;
+`;
+export const TicketQRWrapper = forwardRef<
+  HTMLDivElement,
+  {
+    pcd: PCD<unknown, unknown>;
+  }
+>(({ pcd }, ref) => {
+  const identityPCD = useUserIdentityPCD();
+
+  if (isEdDSATicketPCD(pcd) && identityPCD) {
+    const urls = getURLsBasedOnCategory(pcd.claim.ticket.ticketCategory);
+    return (
+      <QRContainer ref={ref}>
+        <EddsaTicketQR
+          pcd={pcd}
+          zk={false}
+          identityPCD={identityPCD}
+          idBasedVerifyURL={urls.idBasedVerifyURL}
+          verifyURL={urls.verifyURL}
+        />
+      </QRContainer>
+    );
+  }
+  if (isPODTicketPCD(pcd)) {
+    const urls = getURLsBasedOnCategory(pcd.claim.ticket.ticketCategory);
+    if (urls.idBasedVerifyURL)
+      return (
+        <QRContainer ref={ref}>
+          <PODTicketQR
+            ticketData={pcd.claim.ticket}
+            idBasedVerifyURL={urls.idBasedVerifyURL}
+          />
+        </QRContainer>
+      );
+  }
+
+  return (
+    <>
+      <TextCenter>
+        {pcd.type} unsupported <br />
+        no implementation of a ui for this type of card found
+      </TextCenter>
+      <Spacer h={16} />
+    </>
+  );
+});
+
 /**
  * EdDSATicketPCD cards require some extra context and configuration. In
  * particular, they require access to the user's identity PCD for generation
  * of ZK proofs, and can be configured to include different URLs in their QR
  * codes based on the type of ticket provided.
  */
-function TicketWrapper({
-  pcd,
-  hidePadding
-}: {
-  pcd: EdDSATicketPCD;
-  hidePadding?: boolean;
-}): JSX.Element | null {
+const TicketWrapper = forwardRef<
+  HTMLDivElement,
+  {
+    pcd: EdDSATicketPCD;
+    hidePadding?: boolean;
+    newUI?: boolean;
+    addOns?: AddOnsProps;
+  }
+>(({ pcd, newUI, hidePadding, addOns }, ref) => {
   const Card = EdDSATicketPCDUI.renderCardBody;
   const identityPCD = useUserIdentityPCD();
   const ticketCategory = pcd.claim.ticket.ticketCategory;
@@ -210,63 +293,83 @@ function TicketWrapper({
       : `${window.location.origin}/#/verify`;
 
   return identityPCD ? (
-    <Card
-      hidePadding={hidePadding}
-      pcd={pcd}
-      identityPCD={identityPCD}
-      verifyURL={verifyURL}
-      idBasedVerifyURL={idBasedVerifyURL}
-    />
+    <div ref={ref}>
+      <Card
+        newUI={newUI}
+        hidePadding={hidePadding}
+        pcd={pcd}
+        identityPCD={identityPCD}
+        verifyURL={verifyURL}
+        idBasedVerifyURL={idBasedVerifyURL}
+        addOns={addOns}
+      />
+    </div>
   ) : null;
-}
-
-function CardBody({
-  pcd,
-  isMainIdentity,
-  hidePadding
-}: {
+});
+export type AddOnsProps = {
+  onClick: () => void;
+  text: string;
+};
+type CardBodyProps = {
   pcd: PCD;
   isMainIdentity: boolean;
   hidePadding?: boolean;
-}): JSX.Element {
-  const pcdCollection = usePCDCollection();
+  newUI?: boolean;
+  addOns?: AddOnsProps;
+};
 
-  if (isMainIdentity) {
-    return <MainIdentityCard />;
-  }
-  if (pcdCollection.hasPackage(pcd.type)) {
-    if (isEdDSATicketPCD(pcd)) {
-      return <TicketWrapper pcd={pcd} hidePadding={hidePadding} />;
-    }
-    if (isPODTicketPCD(pcd)) {
-      const Component = PODTicketPCDUI.renderCardBody;
-      return (
-        <Component
-          pcd={pcd}
-          idBasedVerifyURL={`${window.location.origin}/#/generic-checkin`}
-        />
-      );
+export const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(
+  ({ pcd, isMainIdentity, hidePadding, newUI, addOns }, ref) => {
+    const pcdCollection = usePCDCollection();
+
+    if (isMainIdentity) {
+      return <MainIdentityCard />;
     }
-    const ui = getUI(pcd.type);
-    if (ui) {
-      const Component = ui.renderCardBody;
-      return <Component pcd={pcd} />;
-    } else {
-      console.warn(`Could not find a UI renderer for PCD type "${pcd.type}"`);
+    if (pcdCollection.hasPackage(pcd.type)) {
+      if (isEdDSATicketPCD(pcd)) {
+        return (
+          <TicketWrapper
+            ref={ref}
+            newUI={newUI}
+            pcd={pcd}
+            hidePadding={hidePadding}
+          />
+        );
+      }
+      if (isPODTicketPCD(pcd)) {
+        const Component = PODTicketPCDUI.renderCardBody;
+        return (
+          <div ref={ref}>
+            <Component
+              ticketData={pcd.claim.ticket}
+              addOns={addOns}
+              newUI={newUI}
+              pcd={pcd}
+              idBasedVerifyURL={`${window.location.origin}/#/generic-checkin`}
+            />
+          </div>
+        );
+      }
+      const ui = getUI(pcd.type);
+      if (ui) {
+        const Component = ui.renderCardBody;
+        return <Component pcd={pcd} />;
+      } else {
+        console.warn(`Could not find a UI renderer for PCD type "${pcd.type}"`);
+      }
     }
-  }
-
-  return (
-    <>
-      <TextCenter>
-        {pcd.type} unsupported <br />
-        no implementation of a ui for this type of card found
-      </TextCenter>
-      <Spacer h={16} />
-    </>
-  );
-}
 
+    return (
+      <>
+        <TextCenter>
+          {pcd.type} unsupported <br />
+          no implementation of a ui for this type of card found
+        </TextCenter>
+        <Spacer h={16} />
+      </>
+    );
+  }
+);
 export const CardContainer = styled.div`
   width: 100%;
   padding: 8px;

apps/passport-client/components/shared/PCDCardList.tsx

@@ -68,6 +68,7 @@ export function PCDCardList({
       })),
     [pcdCollection, pcds]
   );
+  console.log("sortableshit:", sortablePCDs);
   // only show sort options that are valid for all PCDs
   const sortOptions = useMemo(
     () =>