feat: update purchase summary sidebar

Author: jajjibhai008

src/components/PurchaseSummary/EditPlanButton.tsx

@@ -0,0 +1,35 @@
+import { Button } from '@openedx/paragon';
+import React, { useMemo } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { CheckoutPageRoute } from '@/constants/checkout';
+
+const EditPlanButton: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const show = useMemo(() => {
+    const path = location.pathname;
+    if (path === CheckoutPageRoute.AccountDetails || path === CheckoutPageRoute.BillingDetails) {
+      return true;
+    }
+    return false;
+  }, [location.pathname]);
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <Button
+      variant="outline-danger"
+      className="border-light w-100"
+      onClick={() => navigate(CheckoutPageRoute.PlanDetails)}
+      data-testid="edit-plan-button"
+    >
+      Edit Plan
+    </Button>
+  );
+};
+
+export default React.memo(EditPlanButton);

src/components/PurchaseSummary/PurchaseSummary.tsx

@@ -1,18 +1,22 @@
 import { Card, Stack } from '@openedx/paragon';
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 
 import { usePurchaseSummaryPricing } from '@/components/app/data';
-import { DataStoreKey } from '@/constants/checkout';
+import { CheckoutPageRoute, DataStoreKey } from '@/constants/checkout';
 import { useCheckoutFormStore } from '@/hooks/index';
 
 import AutoRenewNotice from './AutoRenewNotice';
 import DueTodayRow from './DueTodayRow';
+import EditPlanButton from './EditPlanButton';
 import LicensesRow from './LicensesRow';
 import PricePerUserRow from './PricePerUserRow';
 import PurchaseSummaryHeader from './PurchaseSummaryHeader';
+import ReceiptButton from './ReceiptButton';
 import TotalAfterTrialRow from './TotalAfterTrialRow';
 
 const PurchaseSummary: React.FC = () => {
+  const location = useLocation();
   const quantity = useCheckoutFormStore((state) => state.formData[DataStoreKey.PlanDetails]?.quantity);
   const companyName = useCheckoutFormStore((state) => state.formData[DataStoreKey.AccountDetails].companyName);
   const {
@@ -36,6 +40,12 @@ const PurchaseSummary: React.FC = () => {
           <DueTodayRow amountDue={yearlySubscriptionCostForQuantity ?? 0} />
         </Stack>
       </Card.Section>
+      <Card.Footer>
+        <EditPlanButton />
+        {location.pathname === CheckoutPageRoute.BillingDetailsSuccess && (
+          <ReceiptButton />
+        )}
+      </Card.Footer>
     </Card>
   );
 };

src/components/PurchaseSummary/ReceiptButton.tsx

@@ -0,0 +1,21 @@
+import { Button } from '@openedx/paragon';
+
+import { useCreateBillingPortalSession } from '@/components/app/data';
+
+const ReceiptButton: React.FC = () => {
+  const { data: billingPortalSession } = useCreateBillingPortalSession();
+  return (
+    <Button
+      className="w-100 text-primary-500"
+      variant="outline-primary"
+      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,22 @@
+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,
+      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,19 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getConfig } from '@edx/frontend-platform/config';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
+
+export interface CreateBillingPortalSessionResponseSchema {
+  url: string;
+}
+
+const createBillingPortalSession = async (checkoutIntentId?: number | null) => {
+  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) as CreateBillingPortalSessionResponseSchema;
+};
+
+export default createBillingPortalSession;