[POC][DO_NOT_MERGE] feat: customer billing portal POC

src/components/PurchaseSummary/PurchaseSummary.tsx

@@ -2,6 +2,7 @@ import { Card, Stack } from '@openedx/paragon';
 import React from 'react';
 
 import { usePurchaseSummaryPricing } from '@/components/app/data';
+import ReceiptButton from '@/components/PurchaseSummary/ReceiptButton';
 import { DataStoreKey } from '@/constants/checkout';
 import { useCheckoutFormStore } from '@/hooks/index';
 
@@ -36,6 +37,9 @@ const PurchaseSummary: React.FC = () => {
           <DueTodayRow amountDue={yearlySubscriptionCostForQuantity ?? 0} />
         </Stack>
       </Card.Section>
+      <Card.Footer>
+        <ReceiptButton />
+      </Card.Footer>
     </Card>
   );
 };

src/components/PurchaseSummary/ReceiptButton.tsx

@@ -0,0 +1,16 @@
+import { Button } from '@openedx/paragon';
+
+import { useCreateBillingPortalSession } from '@/components/app/data';
+
+const ReceiptButton = () => {
+  const { data: billingPortalSession } = useCreateBillingPortalSession();
+
+  // TODO: Stub button
+  return (
+    <Button className="w-100" variant="secondary" size="lg" disabled={!billingPortalSession?.url} href={billingPortalSession?.url} target="_blank" rel="noopener noreferrer">
+      View Receipt
+    </Button>
+  );
+};
+
+export default ReceiptButton;

src/components/app/data/hooks/index.ts

@@ -5,3 +5,4 @@ export { default as useLoginMutation } from './useLoginMutation';
 export { default as useCreateCheckoutSessionMutation } from './useCreateCheckoutSessionMutation';
 export { default as usePurchaseSummaryPricing } from './usePurchaseSummaryPricing';
 export { default as useCheckoutIntent } from './useCheckoutIntent';
+export { default as useCreateBillingPortalSession } from './useCreateBillingPortalSession';

src/components/app/data/hooks/useCreateBillingPortalSession.tsx

@@ -0,0 +1,21 @@
+import { AppContext } from '@edx/frontend-platform/react';
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { useContext } from 'react';
+
+import useBFFSuccess from '@/components/app/data/hooks/useBFFSuccess';
+import { queryCreateBillingPortalSession } from '@/components/app/data/queries/queries';
+
+const useCreateBillingPortalSession = (options = {}) => {
+  const { authenticatedUser }: AppContextValue = useContext(AppContext);
+  const { data: contextData } = useBFFSuccess(authenticatedUser.userId);
+  const { checkoutIntent } = contextData ?? {};
+  return useQuery(
+    queryOptions({
+      ...queryCreateBillingPortalSession(checkoutIntent?.id),
+      ...options,
+      enabled: !!checkoutIntent?.id,
+    }),
+  );
+};
+
+export default useCreateBillingPortalSession;

src/components/app/data/queries/queries.ts

@@ -33,3 +33,9 @@ export const queryBffValidation = (payload: ValidationSchema) => {
       ._ctx.validation(fields, snakeCasedPayload)
   );
 };
+
+export const queryCreateBillingPortalSession = (checkout_intent_id?: number) => (
+  queries
+    .enterpriseCheckout
+    .createBillingPortalSession(checkout_intent_id)
+);

src/components/app/data/queries/queryKeyFactory.ts

@@ -2,6 +2,7 @@ import { createQueryKeys, mergeQueryKeys } from '@lukemorales/query-key-factory'
 
 import createCheckoutSession from '@/components/app/data/services/checkout-session';
 import { fetchCheckoutContext, fetchCheckoutSuccess } from '@/components/app/data/services/context';
+import createBillingPortalSession from '@/components/app/data/services/create-billing-portal';
 import fetchCheckoutValidation from '@/components/app/data/services/validation';
 
 const enterpriseCheckout = createQueryKeys('enterpriseCheckout', {
@@ -26,6 +27,10 @@ const enterpriseCheckout = createQueryKeys('enterpriseCheckout', {
     queryKey: [fields],
     queryFn: () => createCheckoutSession(payload),
   }),
+  createBillingPortalSession: (checkout_intent_id) => ({
+    queryKey: [checkout_intent_id],
+    queryFn: () => createBillingPortalSession(checkout_intent_id),
+  }),
 });
 
 const queries = mergeQueryKeys(enterpriseCheckout);

src/components/app/data/services/create-billing-portal.ts

@@ -0,0 +1,15 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getConfig } from '@edx/frontend-platform/config';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
+
+const createBillingPortalSession = async (checkoutIntentId) => {
+  const { ENTERPRISE_ACCESS_BASE_URL } = getConfig();
+  if (!checkoutIntentId) {
+    return null;
+  }
+  const url = `${ENTERPRISE_ACCESS_BASE_URL}/api/v1/customer-billing/${checkoutIntentId}/create-portal-session`;
+  const response = await getAuthenticatedHttpClient().get(url);
+  return camelCaseObject(response.data);
+};
+
+export default createBillingPortalSession;

src/components/app/routes/loaders/utils.ts

@@ -43,7 +43,7 @@
  *   Object indicating if a successful intent exists and if the intent is expired.
  */
 const determineExistingCheckoutIntentState = (
-  checkoutIntent: ExtendedCheckoutContextCheckoutIntent | null,
+  checkoutIntent: CheckoutContextCheckoutIntent & CheckoutContextCheckoutIntentSuccess | null,
 ): DetermineExistingPaidCheckoutIntent => {
   if (!checkoutIntent) {
     return {
@@ -53,8 +53,8 @@
   }
 
   return {
     existingSuccessfulCheckoutIntent: checkoutIntent.existingSuccessfulCheckoutIntent!,
     expiredCheckoutIntent: checkoutIntent.expiredCheckoutIntent!,
   };
 };
 

src/types/types.d.ts

@@ -292,7 +292,15 @@ declare global {
     adminPortalUrl: string;
   }
 
-  interface ExtendedCheckoutContextCheckoutIntent extends CheckoutContextCheckoutIntent {
+  // TODO: will need to be modified further to include missing fields from the API response
+  interface CheckoutContextCheckoutIntentSuccess extends CheckoutContextCheckoutIntent {
+    stripeCustomerId: string;
+    enterpriseCustomerUuid: string | null;
+  }
+
+  interface ExtendedCheckoutContextCheckoutIntent extends
+    CheckoutContextCheckoutIntent,
+    CheckoutContextCheckoutIntentSuccess {
     existingSuccessfulCheckoutIntent: boolean | null;
     expiredCheckoutIntent: boolean | null;
   }