wire up certificate upgrade link to actual API endpoints

Author: gumaerc

frontends/api/src/mitxonline/clients.ts

@@ -1,5 +1,6 @@
 import {
   B2bApi,
+  BasketsApi,
   CoursesApi,
   CourseCertificatesApi,
   EnrollmentsApi,
@@ -29,6 +30,7 @@ const BASE_PATH =
 const usersApi = new UsersApi(undefined, BASE_PATH, axiosInstance)
 const countriesApi = new CountriesApi(undefined, BASE_PATH, axiosInstance)
 const b2bApi = new B2bApi(undefined, BASE_PATH, axiosInstance)
+const basketsApi = new BasketsApi(undefined, BASE_PATH, axiosInstance)
 const programsApi = new ProgramsApi(undefined, BASE_PATH, axiosInstance)
 const programCollectionsApi = new ProgramCollectionsApi(
   undefined,
@@ -70,6 +72,7 @@ export {
   usersApi,
   countriesApi,
   b2bApi,
+  basketsApi,
   courseRunEnrollmentsApi,
   programEnrollmentsApi,
   programsApi,

frontends/api/src/mitxonline/hooks/baskets/index.ts

@@ -0,0 +1,73 @@
+import { basketQueries } from "./queries"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { basketsApi } from "../../clients"
+import type { BasketWithProduct } from "@mitodl/mitxonline-api-axios/v2"
+
+/**
+ * Hook to add a product to the user's basket.
+ * Creates or updates the basket, adding the specified product.
+ * On success, automatically redirects to the checkout page.
+ */
+const useAddToBasket = () => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: async (productId: number): Promise<BasketWithProduct> => {
+      const response = await basketsApi.basketsCreateFromProductCreate({
+        product_id: productId,
+      })
+      return response.data
+    },
+    onSuccess: async () => {
+      // Invalidate checkout query to ensure fresh data
+      queryClient.invalidateQueries({
+        queryKey: basketQueries.checkout().queryKey,
+      })
+
+      // Get checkout data and submit form to CyberSource
+      try {
+        const checkoutResponse = await basketsApi.basketsCheckoutRetrieve()
+        const { url, payload } = checkoutResponse.data
+
+        if (url && payload) {
+          // Create a form and submit it to CyberSource
+          const form = document.createElement("form")
+          form.method = "POST"
+          form.action = url
+
+          // Add all payload fields as hidden inputs
+          Object.entries(payload).forEach(([key, value]) => {
+            const input = document.createElement("input")
+            input.type = "hidden"
+            input.name = key
+            input.value = String(value)
+            form.appendChild(input)
+          })
+
+          document.body.appendChild(form)
+          form.submit()
+        }
+      } catch (error) {
+        console.error("Failed to get checkout URL:", error)
+      }
+    },
+  })
+}
+
+/**
+ * Hook to clear the user's basket.
+ */
+const useClearBasket = () => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: async (): Promise<void> => {
+      await basketsApi.basketsClearDestroy()
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: basketQueries.checkout().queryKey,
+      })
+    },
+  })
+}
+
+export { basketQueries, useAddToBasket, useClearBasket }

frontends/api/src/mitxonline/hooks/baskets/queries.ts

@@ -0,0 +1,25 @@
+import { queryOptions } from "@tanstack/react-query"
+import type { CheckoutPayload } from "@mitodl/mitxonline-api-axios/v2"
+
+import { basketsApi } from "../../clients"
+
+const basketKeys = {
+  root: ["mitxonline", "baskets"],
+  checkout: () => [...basketKeys.root, "checkout"],
+}
+
+const basketQueries = {
+  checkout: () =>
+    queryOptions({
+      queryKey: basketKeys.checkout(),
+      queryFn: async (): Promise<CheckoutPayload> => {
+        const response = await basketsApi.basketsCheckoutRetrieve()
+        return response.data
+      },
+      // Don't cache checkout data - always fetch fresh
+      staleTime: 0,
+      gcTime: 0,
+    }),
+}
+
+export { basketKeys, basketQueries }

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx

@@ -29,6 +29,7 @@ import { useCreateB2bEnrollment } from "api/mitxonline-hooks/enrollment"
 import { mitxUserQueries } from "api/mitxonline-hooks/user"
 import { useQuery } from "@tanstack/react-query"
 import { programView } from "@/common/urls"
+import { useAddToBasket } from "api/mitxonline-hooks/baskets"
 import { EnrollmentStatus, getBestRun, getEnrollmentStatus } from "./helpers"
 import {
   CourseWithCourseRunsSerializerV2,
@@ -421,13 +422,24 @@ const UpgradeBanner: React.FC<
     canUpgrade: boolean
     certificateUpgradeDeadline?: string | null
     certificateUpgradePrice?: string | null
+    productId?: number | null
   } & React.HTMLAttributes<HTMLDivElement>
 > = ({
   canUpgrade,
   certificateUpgradeDeadline,
   certificateUpgradePrice,
+  productId,
   ...others
 }) => {
+  const addToBasket = useAddToBasket()
+
+  const handleUpgradeClick = async (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault()
+    if (!productId || addToBasket.isPending) return
+
+    addToBasket.mutate(productId)
+  }
+
   if (!canUpgrade || !certificateUpgradeDeadline || !certificateUpgradePrice) {
     return null
   }
@@ -437,7 +449,7 @@ const UpgradeBanner: React.FC<
   const formattedPrice = `$${certificateUpgradePrice}`
   return (
     <SubtitleLinkRoot {...others}>
-      <SubtitleLink href="#">
+      <SubtitleLink href="#" onClick={handleUpgradeClick}>
         <RiAddLine size="16px" />
         Add a certificate for {formattedPrice}
       </SubtitleLink>
@@ -691,6 +703,7 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
           canUpgrade={run?.is_upgradable ?? false}
           certificateUpgradeDeadline={run?.upgrade_deadline}
           certificateUpgradePrice={run?.products?.[0]?.price}
+          productId={run?.products?.[0]?.id}
         />
       ) : null}
     </>