feat: update purchase summary sidebar

src/components/PurchaseSummary/EditPlanButton.tsx

@@ -0,0 +1,27 @@
+import { Button } from '@openedx/paragon';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useNavigate } from 'react-router';
+
+import { CheckoutPageRoute } from '@/constants/checkout';
+
+const EditPlanButton: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <Button
+      variant="outline-danger"
+      className="border-light w-100"
+      onClick={() => navigate(CheckoutPageRoute.PlanDetails)}
+      data-testid="edit-plan-button"
+    >
+      <FormattedMessage
+        id="components.PurchaseSummary.EditPlanButton.editPlan"
+        defaultMessage="Edit Plan"
+        description="Button text to edit the current plan selection"
+      />
+    </Button>
+  );
+};
+
+export default React.memo(EditPlanButton);

src/components/PurchaseSummary/PurchaseSummary.tsx

@@ -9,6 +9,7 @@ import AutoRenewNotice from './AutoRenewNotice';
 import DueTodayRow from './DueTodayRow';
 import LicensesRow from './LicensesRow';
 import PricePerUserRow from './PricePerUserRow';
+import PurchaseSummaryCardButton from './PurchaseSummaryCardButton';
 import PurchaseSummaryHeader from './PurchaseSummaryHeader';
 import TotalAfterTrialRow from './TotalAfterTrialRow';
 
@@ -36,6 +37,9 @@ const PurchaseSummary: React.FC = () => {
           <DueTodayRow amountDue={yearlySubscriptionCostForQuantity ?? 0} />
         </Stack>
       </Card.Section>
+      <Card.Footer>
+        <PurchaseSummaryCardButton />
+      </Card.Footer>
     </Card>
   );
 };

src/components/PurchaseSummary/PurchaseSummaryCardButton.tsx

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { CheckoutPageRoute } from '@/constants/checkout';
+
+import EditPlanButton from './EditPlanButton';
+import ReceiptButton from './ReceiptButton';
+
+const BUTTON_TYPES = {
+  EDIT: 'edit',
+  RECEIPT: 'receipt',
+  NONE: 'none',
+} as const;
+
+type ButtonType = typeof BUTTON_TYPES[keyof typeof BUTTON_TYPES];
+
+const ROUTE_BUTTON_MAP: Record<string, ButtonType> = {
+  [CheckoutPageRoute.AccountDetails]: BUTTON_TYPES.EDIT,
+  [CheckoutPageRoute.BillingDetails]: BUTTON_TYPES.EDIT,
+  [CheckoutPageRoute.BillingDetailsSuccess]: BUTTON_TYPES.RECEIPT,
+  [CheckoutPageRoute.PlanDetails]: BUTTON_TYPES.NONE,
+  [CheckoutPageRoute.PlanDetailsLogin]: BUTTON_TYPES.NONE,
+  [CheckoutPageRoute.PlanDetailsRegister]: BUTTON_TYPES.NONE,
+};
+
+const BUTTON_COMPONENTS: Record<ButtonType, React.ComponentType | null> = {
+  [BUTTON_TYPES.EDIT]: EditPlanButton,
+  [BUTTON_TYPES.RECEIPT]: ReceiptButton,
+  [BUTTON_TYPES.NONE]: null,
+};
+
+const PurchaseSummaryCardButton: React.FC = () => {
+  const location = useLocation();
+
+  const buttonType = useMemo(
+    (): ButtonType => ROUTE_BUTTON_MAP[location.pathname] ?? BUTTON_TYPES.NONE,
+    [location.pathname],
+  );
+
+  const ButtonComponent = BUTTON_COMPONENTS[buttonType];
+
+  return ButtonComponent ? <ButtonComponent /> : null;
+};
+
+export default PurchaseSummaryCardButton;

src/components/PurchaseSummary/ReceiptButton.tsx

@@ -0,0 +1,39 @@
+import { Button } from '@openedx/paragon';
+import { FormattedMessage } from 'react-intl';
+
+import { useCheckoutIntent, useCreateBillingPortalSession } from '@/components/app/data';
+import EVENT_NAMES from '@/constants/events';
+import { sendEnterpriseCheckoutTrackingEvent } from '@/utils/common';
+
+const ReceiptButton: React.FC = () => {
+  const { data: billingPortalSession } = useCreateBillingPortalSession();
+  const { data: checkoutIntent } = useCheckoutIntent();
+  return (
+    <Button
+      className="w-100 text-primary-500"
+      variant="outline-primary"
+      disabled={!billingPortalSession?.url}
+      href={billingPortalSession?.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      onClick={() => {
+        sendEnterpriseCheckoutTrackingEvent({
+          checkoutIntentId: checkoutIntent?.id ?? null,
+          eventName: EVENT_NAMES.SUBSCRIPTION_CHECKOUT.VIEW_RECEIPT_BUTTON_CLICKED,
+          properties: {
+            checkoutIntent,
+            billingPortalSessionUrl: billingPortalSession?.url,
+          },
+        });
+      }}
+    >
+      <FormattedMessage
+        id="components.PurchaseSummary.ReceiptButton.viewReceipt"
+        defaultMessage="View receipt"
+        description="Button text to view the receipt for the purchase"
+      />
+    </Button>
+  );
+};
+
+export default ReceiptButton;

src/components/PurchaseSummary/tests/PurchaseSummary.test.tsx

@@ -1,7 +1,7 @@
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import '@testing-library/jest-dom';
-import React from 'react';
 
 import { usePurchaseSummaryPricing } from '@/components/app/data';
 import { DataStoreKey } from '@/constants/checkout';
@@ -12,6 +12,8 @@ import PurchaseSummary from '../PurchaseSummary';
 jest.mock('@/components/app/data', () => ({
   __esModule: true,
   usePurchaseSummaryPricing: jest.fn(),
+  useCreateBillingPortalSession: jest.fn(() => ({ data: { url: null } })),
+  useCheckoutIntent: jest.fn(() => ({ data: { id: 123 } })),
 }));
 
 describe('PurchaseSummary', () => {
@@ -35,7 +37,9 @@ describe('PurchaseSummary', () => {
   it('renders header and rows with computed values', () => {
     render(
       <IntlProvider locale="en">
-        <PurchaseSummary />
+        <MemoryRouter>
+          <PurchaseSummary />
+        </MemoryRouter>
       </IntlProvider>,
     );
 

src/components/PurchaseSummary/tests/PurchaseSummaryCardButton.test.tsx

@@ -0,0 +1,189 @@
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import '@testing-library/jest-dom';
+
+import { CheckoutPageRoute } from '@/constants/checkout';
+
+import PurchaseSummaryCardButton from '../PurchaseSummaryCardButton';
+
+jest.mock('@/components/app/data', () => ({
+  __esModule: true,
+  useCreateBillingPortalSession: jest.fn(() => ({
+    data: { url: 'https://billing.example.com/portal' },
+  })),
+  useCheckoutIntent: jest.fn(() => ({
+    data: { id: 123 },
+  })),
+}));
+
+jest.mock('@/utils/common', () => ({
+  sendEnterpriseCheckoutTrackingEvent: jest.fn(),
+}));
+
+const mockNavigate = jest.fn();
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
+  useNavigate: () => mockNavigate,
+}));
+
+const renderWithRouter = (initialRoute: string) => render(
+  <IntlProvider locale="en">
+    <MemoryRouter initialEntries={[initialRoute]}>
+      <PurchaseSummaryCardButton />
+    </MemoryRouter>
+  </IntlProvider>,
+);
+
+describe('PurchaseSummaryCardButton', () => {
+  const mockSendTrackingEvent = jest.requireMock('@/utils/common').sendEnterpriseCheckoutTrackingEvent;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('Edit Plan Button Rendering', () => {
+    it('renders EditPlanButton on AccountDetails route', () => {
+      renderWithRouter(CheckoutPageRoute.AccountDetails);
+
+      expect(screen.getByTestId('edit-plan-button')).toBeInTheDocument();
+      expect(screen.getByText('Edit Plan')).toBeInTheDocument();
+      expect(screen.queryByText('View receipt')).not.toBeInTheDocument();
+    });
+
+    it('renders EditPlanButton on BillingDetails route', () => {
+      renderWithRouter(CheckoutPageRoute.BillingDetails);
+
+      expect(screen.getByTestId('edit-plan-button')).toBeInTheDocument();
+      expect(screen.getByText('Edit Plan')).toBeInTheDocument();
+      expect(screen.queryByText('View receipt')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Receipt Button Rendering', () => {
+    it('renders ReceiptButton on BillingDetailsSuccess route', () => {
+      renderWithRouter(CheckoutPageRoute.BillingDetailsSuccess);
+
+      expect(screen.getByText('View receipt')).toBeInTheDocument();
+      expect(screen.queryByTestId('edit-plan-button')).not.toBeInTheDocument();
+      expect(screen.queryByText('Edit Plan')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('No Button Rendering', () => {
+    it('renders nothing on PlanDetails route', () => {
+      renderWithRouter(CheckoutPageRoute.PlanDetails);
+
+      expect(screen.queryByTestId('edit-plan-button')).not.toBeInTheDocument();
+      expect(screen.queryByText('Edit Plan')).not.toBeInTheDocument();
+      expect(screen.queryByText('View receipt')).not.toBeInTheDocument();
+    });
+
+    it('renders nothing on PlanDetailsLogin route', () => {
+      renderWithRouter(CheckoutPageRoute.PlanDetailsLogin);
+
+      expect(screen.queryByTestId('edit-plan-button')).not.toBeInTheDocument();
+      expect(screen.queryByText('Edit Plan')).not.toBeInTheDocument();
+      expect(screen.queryByText('View receipt')).not.toBeInTheDocument();
+    });
+
+    it('renders nothing on PlanDetailsRegister route', () => {
+      renderWithRouter(CheckoutPageRoute.PlanDetailsRegister);
+
+      expect(screen.queryByTestId('edit-plan-button')).not.toBeInTheDocument();
+      expect(screen.queryByText('Edit Plan')).not.toBeInTheDocument();
+      expect(screen.queryByText('View receipt')).not.toBeInTheDocument();
+    });
+
+    it('renders nothing for unknown/unmapped routes', () => {
+      renderWithRouter('/unknown-route');
+
+      expect(screen.queryByTestId('edit-plan-button')).not.toBeInTheDocument();
+      expect(screen.queryByText('Edit Plan')).not.toBeInTheDocument();
+      expect(screen.queryByText('View receipt')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Component Behavior', () => {
+    it('returns null when no button should be rendered', () => {
+      const { container } = renderWithRouter(CheckoutPageRoute.PlanDetails);
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('memoizes button type calculation correctly', () => {
+      const { rerender } = renderWithRouter(CheckoutPageRoute.AccountDetails);
+
+      expect(screen.getByTestId('edit-plan-button')).toBeInTheDocument();
+
+      rerender(
+        <IntlProvider locale="en">
+          <MemoryRouter initialEntries={[CheckoutPageRoute.AccountDetails]}>
+            <PurchaseSummaryCardButton />
+          </MemoryRouter>
+        </IntlProvider>,
+      );
+
+      expect(screen.getByTestId('edit-plan-button')).toBeInTheDocument();
+    });
+  });
+
+  describe('Button Interactions', () => {
+    it('calls navigate when Edit Plan button is clicked', async () => {
+      const user = userEvent.setup();
+      renderWithRouter(CheckoutPageRoute.AccountDetails);
+
+      const editButton = screen.getByTestId('edit-plan-button');
+      await user.click(editButton);
+
+      expect(mockNavigate).toHaveBeenCalledWith(CheckoutPageRoute.PlanDetails);
+    });
+
+    it('calls tracking event when View Receipt button is clicked', async () => {
+      const user = userEvent.setup();
+
+      renderWithRouter(CheckoutPageRoute.BillingDetailsSuccess);
+
+      const receiptButton = screen.getByText('View receipt');
+      await user.click(receiptButton);
+
+      expect(mockSendTrackingEvent).toHaveBeenCalledWith({
+        checkoutIntentId: 123,
+        eventName: 'edx.ui.enterprise.checkout.self_service_subscription_checkout.billing_details_success.view_receipt_button.clicked',
+        properties: {
+          checkoutIntent: { id: 123 },
+          billingPortalSessionUrl: 'https://billing.example.com/portal',
+        },
+      });
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty string route gracefully', () => {
+      renderWithRouter('');
+
+      expect(screen.queryByTestId('edit-plan-button')).not.toBeInTheDocument();
+      expect(screen.queryByText('Edit Plan')).not.toBeInTheDocument();
+      expect(screen.queryByText('View receipt')).not.toBeInTheDocument();
+    });
+
+    it('handles route with query parameters', () => {
+      renderWithRouter(`${CheckoutPageRoute.AccountDetails}?param=value`);
+
+      // Route with query parameters should still match the base route
+      expect(screen.getByTestId('edit-plan-button')).toBeInTheDocument();
+      expect(screen.getByText('Edit Plan')).toBeInTheDocument();
+      expect(screen.queryByText('View receipt')).not.toBeInTheDocument();
+    });
+
+    it('handles route with hash fragment', () => {
+      renderWithRouter(`${CheckoutPageRoute.BillingDetails}#section`);
+
+      // Route with hash fragment should still match the base route
+      expect(screen.getByTestId('edit-plan-button')).toBeInTheDocument();
+      expect(screen.getByText('Edit Plan')).toBeInTheDocument();
+      expect(screen.queryByText('View receipt')).not.toBeInTheDocument();
+    });
+  });
+});

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 ?? null);
+  const { checkoutIntent } = contextData ?? {};
+
+  return useQuery(
+    queryOptions({
+      ...queryCreateBillingPortalSession(checkoutIntent?.id),
+      ...options,
+    }),
+  );
+};
+
+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)
+);