feature/stripe-checkout

src/common/config.ts

@@ -18,6 +18,7 @@ export type ConfigType = {
   AadValidClientId: string;
   EntraServicePrincipalId: string;
   LinkryBaseUrl: string;
+  PaymentBaseUrl: string;
   PasskitIdentifier: string;
   PasskitSerialNumber: string;
   EmailDomain: string;
@@ -143,6 +144,7 @@ const environmentConfig: EnvironmentConfigType = {
     ],
     AadValidClientId: "39c28870-94e4-47ee-b4fb-affe0bf96c9f",
     LinkryBaseUrl: "https://core.aws.qa.acmuiuc.org",
+    PaymentBaseUrl: "https://invoice.aws.qa.acmuiuc.org",
     PasskitIdentifier: "pass.org.acmuiuc.qa.membership",
     PasskitSerialNumber: "0",
     EmailDomain: "aws.qa.acmuiuc.org",
@@ -187,6 +189,7 @@ const environmentConfig: EnvironmentConfigType = {
     ],
     AadValidClientId: "5e08cf0f-53bb-4e09-9df2-e9bdc3467296",
     LinkryBaseUrl: "https://acm.gg/",
+    PaymentBaseUrl: "https://invoice.acm.illinois.edu",
     PasskitIdentifier: "pass.edu.illinois.acm.membership",
     PasskitSerialNumber: "0",
     EmailDomain: "acm.illinois.edu",

src/common/types/stripe.ts

@@ -1,5 +1,5 @@
 import * as z from "zod/v4";
-
+import { OrgUniqueId } from "./generic.js"
 
 const id = z.string().min(1).meta({
   description: "The Payment Link's ID in the Stripe API",
@@ -43,8 +43,56 @@ export const invoiceLinkGetResponseSchema = z.array(
     invoiceId,
     invoiceAmountUsd,
     createdAt: z.union([z.iso.datetime(), z.null()]).meta({ description: "When the payment link was created." })
+  }).omit({
+    contactEmail: true,
+    contactName: true
   })
 );
 
 export type GetInvoiceLinksResponse = z.infer<
   typeof invoiceLinkGetResponseSchema>;
+
+export const createInvoicePostResponseSchema = z.object({
+  id: z.string().min(1),
+  invoiceId: z.string().min(1),
+  link: z.url(),
+});
+
+export const createInvoiceConflictResponseSchema = z.object({
+  needsConfirmation: z.literal(true),
+  customerId: z.string().min(1),
+  current: z.object({
+    name: z.string().nullable().optional(),
+    email: z.string().nullable().optional(),
+  }),
+  incoming: z.object({
+    name: z.string().min(1),
+    email: z.email(),
+  }),
+  message: z.string().min(1),
+});
+
+export const createInvoicePostResponseSchemaUnion = z.union([
+  createInvoicePostResponseSchema,     // success: 201
+  createInvoiceConflictResponseSchema, // info mismatch: 409
+]);
+
+export type PostCreateInvoiceResponseUnion = z.infer<
+  typeof createInvoicePostResponseSchemaUnion
+>;
+
+export const createInvoicePostRequestSchema = z.object({
+  invoiceId,
+  invoiceAmountUsd,
+  contactName: z.string().min(1),
+  contactEmail: z.email(),
+  acmOrg: OrgUniqueId,
+});
+
+export type PostCreateInvoiceRequest = z.infer<
+  typeof createInvoicePostRequestSchema
+>;
+
+export type PostCreateInvoiceResponse = z.infer<
+  typeof createInvoicePostResponseSchema
+>;

src/common/utils.ts

@@ -83,3 +83,50 @@ export function getNetIdFromEmail(email: string): string {
   const [netId] = normalizedEmail.split("@");
   return netId.toLowerCase();
 }
+
+
+/**
+ * Encodes an invoice payment token in the format:
+ * Base64URL(orgId#emailDomain#invoiceId)
+ */
+export function encodeInvoiceToken({
+  orgId,
+  emailDomain,
+  invoiceId,
+}: {
+  orgId: string;
+  emailDomain: string;
+  invoiceId: string;
+}): string {
+  return Buffer.from(
+    `${orgId}#${emailDomain}#${invoiceId}`,
+    "utf8",
+  ).toString("base64url");
+}
+
+/**
+ * Decodes and validates an invoice payment token.
+ */
+export function decodeInvoiceToken(token: string): {
+  orgId: string;
+  emailDomain: string;
+  invoiceId: string;
+} {
+  let decoded: string;
+
+  try {
+    decoded = Buffer.from(token, "base64url").toString("utf8");
+  } catch {
+    throw new ValidationError({ message: "Invalid invoice token encoding." });
+  }
+
+  const parts = decoded.split("#");
+  const orgId = parts[0];
+  const emailDomain = parts[1];
+  const invoiceId = parts.slice(2).join("#"); // keep remainder
+
+  if (!orgId || !emailDomain || !invoiceId) {
+    throw new ValidationError({ message: "Malformed invoice token." });
+  }
+  return { orgId, emailDomain, invoiceId };
+}

src/ui/Router.tsx

@@ -31,6 +31,7 @@ import { OrgInfoPage } from "./pages/organization/OrgInfo.page";
 import { ViewStoreItemsPage } from "./pages/store/ViewStoreItems.page";
 import { ViewStorePurchasesPage } from "./pages/store/ViewStorePurchases.page";
 import { ManageRsvpConfigFormPage } from "./pages/rsvps/ManageRsvpConfig.page";
+import { StripePaymentStatus } from "./pages/stripe/StripePaymentStatus.page";
 
 const ProfileRediect: React.FC = () => {
   const location = useLocation();
@@ -106,6 +107,10 @@ const profileRouter = createBrowserRouter([
         path: "/profile",
         element: <ViewProfilePage />,
       },
+      {
+        path: "/stripe/status",
+        element: <StripePaymentStatus />,
+      },
       {
         path: "*",
         element: <ProfileRediect />,
@@ -132,6 +137,10 @@ const unauthenticatedRouter = createBrowserRouter([
         path: "*",
         element: <LoginRedirect />,
       },
+      {
+        path: "/stripe/status",
+        element: <StripePaymentStatus />,
+      },
     ],
   },
 ]);
@@ -222,6 +231,10 @@ const authenticatedRouter = createBrowserRouter([
         path: "/stripe",
         element: <ManageStripeLinksPage />,
       },
+      {
+        path: "/stripe/status",
+        element: <StripePaymentStatus />,
+      },
       {
         path: "/roomRequests",
         element: <ManageRoomRequestsPage />,

src/ui/pages/stripe/CreateLink.test.tsx

@@ -33,7 +33,7 @@ describe("StripeCreateLinkPanel Tests", () => {
   it("renders the form fields correctly", async () => {
     await renderComponent();
 
-    expect(screen.getByText("Invoice ID")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("123")).toBeInTheDocument();
     expect(screen.getByText("Invoice Amount")).toBeInTheDocument();
     expect(screen.getByText("Invoice Recipient Name")).toBeInTheDocument();
     expect(screen.getByText("Invoice Recipient Email")).toBeInTheDocument();
@@ -51,7 +51,7 @@ describe("StripeCreateLinkPanel Tests", () => {
       screen.getByPlaceholderText("email@illinois.edu"),
       "invalidEmail",
     );
-    await user.clear(screen.getByPlaceholderText("ACM100"));
+    await user.clear(screen.getByPlaceholderText("123"));
     expect(createLinkMock).toHaveBeenCalledTimes(0);
   });
 
@@ -60,7 +60,7 @@ describe("StripeCreateLinkPanel Tests", () => {
     const user = userEvent.setup();
     await renderComponent();
 
-    await user.type(screen.getByPlaceholderText("ACM100"), "INV123");
+    await user.type(screen.getByPlaceholderText("123"), "INV123");
     await user.clear(screen.getByPlaceholderText("100"));
     await user.type(screen.getByPlaceholderText("100"), "100");
     await user.type(screen.getByPlaceholderText("John Doe"), "John Doe");
@@ -73,6 +73,7 @@ describe("StripeCreateLinkPanel Tests", () => {
     await act(async () => {
       expect(createLinkMock).toHaveBeenCalledWith({
         achPaymentsEnabled: false,
+        acmOrg: null,
         invoiceId: "INV123",
         invoiceAmountUsd: 100,
         contactName: "John Doe",
@@ -86,7 +87,7 @@ describe("StripeCreateLinkPanel Tests", () => {
     const user = userEvent.setup();
     await renderComponent();
 
-    await user.type(screen.getByPlaceholderText("ACM100"), "INV123");
+    await user.type(screen.getByPlaceholderText("123"), "INV123");
     await user.type(screen.getByPlaceholderText("100"), "100");
     await user.type(screen.getByPlaceholderText("John Doe"), "John Doe");
     await user.type(
@@ -107,7 +108,7 @@ describe("StripeCreateLinkPanel Tests", () => {
     const user = userEvent.setup();
     await renderComponent();
 
-    await user.type(screen.getByPlaceholderText("ACM100"), "INV123");
+    await user.type(screen.getByPlaceholderText("123"), "INV123");
     await user.type(screen.getByPlaceholderText("100"), "100");
     await user.type(screen.getByPlaceholderText("John Doe"), "John Doe");
     await user.type(

src/ui/pages/stripe/CreateLink.tsx

@@ -22,7 +22,11 @@ import {
   PostInvoiceLinkRequest,
   PostInvoiceLinkResponse,
 } from "@common/types/stripe";
-import FullScreenLoader from "@ui/components/AuthContext/LoadingScreen";
+import { ManageableOrgsSelector } from "@ui/components/ManageableOrgsSelector";
+import { getPrimarySuggestedOrg } from "@ui/util";
+import { useAuth } from "@ui/components/AuthContext";
+import { OrganizationId } from "@acm-uiuc/js-shared";
+import { AppRoles } from "@common/roles";
 
 interface StripeCreateLinkPanelProps {
   createLink: (
@@ -36,6 +40,10 @@ export const StripeCreateLinkPanel: React.FC<StripeCreateLinkPanelProps> = ({
   const [modalOpened, setModalOpened] = useState(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [returnedLink, setReturnedLink] = useState<string | null>(null);
+  const [userPrimaryOrg, setUserPrimaryOrg] = useState<OrganizationId | null>(
+    null,
+  );
+  const { orgRoles } = useAuth();
 
   const form = useForm({
     initialValues: {
@@ -44,6 +52,7 @@ export const StripeCreateLinkPanel: React.FC<StripeCreateLinkPanelProps> = ({
       contactName: "",
       contactEmail: "",
       achPaymentsEnabled: false,
+      acmOrg: userPrimaryOrg,
     },
     validate: {
       invoiceId: (value) =>
@@ -86,9 +95,28 @@ export const StripeCreateLinkPanel: React.FC<StripeCreateLinkPanelProps> = ({
         Create a Payment Link
       </Title>
       <form onSubmit={form.onSubmit(handleSubmit)}>
+        <ManageableOrgsSelector
+          adminRoles={[AppRoles.STRIPE_LINK_ADMIN]}
+          showAllOrgs={false}
+          value={form.values.acmOrg ?? null}
+          onChange={(org) => form.setFieldValue("acmOrg", org)}
+          onOrgsLoaded={(orgs) => {
+            if (orgs.length > 0) {
+              const primOrg = getPrimarySuggestedOrg(orgRoles);
+              if (primOrg) {
+                setUserPrimaryOrg(primOrg);
+                form.setFieldValue("acmOrg", primOrg);
+              }
+            }
+          }}
+          label="Invoice Recipient Org"
+          placeholder="Select recipient organization"
+          description="Only orgs you manage are shown here."
+          withAsterisk
+        />
         <TextInput
           label="Invoice ID"
-          placeholder="ACM100"
+          placeholder="123"
           description="Make sure the Invoice ID is prefixed with a unique string for your group to avoid processing delays."
           {...form.getInputProps("invoiceId")}
           required