feat: add Essentials plan details form with license user validation

Author: tsunkara-sonata

src/components/Stepper/CheckoutStepperContainer.tsx

@@ -17,7 +17,6 @@ const Steps = (): ReactElement => (
 
 const CheckoutStepperContainer = (): ReactElement => {
   const { currentStepKey, currentSubstepKey } = useCurrentStep();
-
   useEffect(() => {
     const preventUnload = (e: BeforeUnloadEvent) => {
       if (currentSubstepKey !== CheckoutSubstepKey.Success) {

src/components/Stepper/StepperContent/PlanDetailsContent.tsx

@@ -1,5 +1,6 @@
 import { AppContext } from '@edx/frontend-platform/react';
 import { useContext } from 'react';
+import { useMatch } from 'react-router-dom';
 
 import { AuthenticatedUserField, LicensesField, NameAndEmailFields } from '@/components/FormFields';
 import { PriceAlert } from '@/components/plan-details-pages/PriceAlert';
@@ -15,6 +16,9 @@ interface PlanDetailsContentProps {
   form: UseFormReturn<PlanDetailsData>;
 }
 
+// Hook that determines whether the current route is part of the Essentials flow.
+const useIsEssentialsRoute = () => !!useMatch('/essentials/*');
+
 /**
  * Renders the content for the Plan Details step, including:
  * - Price alert
@@ -26,9 +30,10 @@ interface PlanDetailsContentProps {
  */
 const PlanDetailsContent = ({ form }: PlanDetailsContentProps) => {
   const { authenticatedUser }: AppContextValue = useContext(AppContext);
+  const isEssentials = useIsEssentialsRoute();
   return (
     <>
-      <PriceAlert />
+      {!isEssentials && <PriceAlert />}
       <LicensesField form={form} />
       {authenticatedUser
         ? (

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

@@ -201,3 +201,41 @@ const makeCheckoutStepperLoader: MakeRouteLoaderFunctionWithQueryClient = functi
 };
 
 export default makeCheckoutStepperLoader;
+
+export const makeEssentialsCheckoutStepperLoader = (queryClient?: QueryClient) => {
+  const baseLoader = makeCheckoutStepperLoader(queryClient);
+  return async function essentialsCheckoutStepperLoader(args: any) {
+    try {
+      // Delegate to the original checkout stepper loader.
+      // If it returns normally, just pass the value through.
+      // eslint-disable-next-line @typescript-eslint/return-await
+      return await baseLoader(args);
+    } catch (error: any) {
+      // React Router implements redirects in loaders by throwing a `Response`
+      // whose `Location` header indicates the redirect target.
+      if (error instanceof Response) {
+        const { status } = error;
+        const location = error.headers.get('Location');
+        // Only consider typical redirect statuses with an absolute, non-Essentials path.
+        if (
+          location
+          && (status === 301 || status === 302 || status === 303 || status === 307 || status === 308)
+          && location.startsWith('/')
+          && !location.startsWith('/essentials/')
+        ) {
+          const newLocation = `/essentials${location}`;
+          const headers = new Headers(error.headers);
+          headers.set('Location', newLocation);
+          // eslint-disable-next-line @typescript-eslint/no-throw-literal
+          throw new Response(error.body, {
+            status: error.status,
+            statusText: error.statusText,
+            headers,
+          });
+        }
+      }
+      // For non-redirect errors or already-correct Essentials paths, rethrow unchanged.
+      throw error;
+    }
+  };
+};

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

@@ -5,3 +5,4 @@
  */
 export { default as makeRootLoader } from './rootLoader';
 export { default as makeCheckoutStepperLoader } from './checkoutStepperLoader';
+export { makeEssentialsCheckoutStepperLoader } from './checkoutStepperLoader';

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

@@ -122,9 +122,8 @@ const makeRootLoader = (
    * This check happens AFTER feature flag validation.
    */
   const isCheckoutRoute = !Object.values(EssentialsPageRoute).some(route => isPathMatch(currentPath, route));
-
   if (!isCheckoutRoute) {
-    return null;
+    // return null; Allowing essential routes to participate checkout intent logic
   }
 
   // Fetch basic info about authenticated user from JWT token, and also hydrate it with additional