[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,20 @@
+import { AppContext } from '@edx/frontend-platform/react';
+import { Button } from '@openedx/paragon';
+import { useContext } from 'react';
+
+import useBFFSuccess from '@/components/app/data/hooks/useBFFSuccess';
+
+const ReceiptButton = () => {
+  const { authenticatedUser }: AppContextValue = useContext(AppContext);
+  const { data: contextData } = useBFFSuccess(authenticatedUser.userId);
+  const { checkoutIntent } = contextData ?? {};
+
+  // TODO: Stub button
+  return (
+    <Button className="w-100" variant="secondary" size="lg" disabled={!checkoutIntent?.stripeCustomerId}>
+      View Receipt
+    </Button>
+  );
+};
+
+export default ReceiptButton;

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;
   }