[DO_NOT_MERGE][POC] feat: academic selection step

src/components/Stepper/CheckoutStepperContainer.tsx

@@ -1,23 +1,37 @@
+import { getConfig } from '@edx/frontend-platform/config';
 import { Col, Row, Stack, Stepper } from '@openedx/paragon';
 import { ReactElement, useEffect } from 'react';
 
 import { PurchaseSummary } from '@/components/PurchaseSummary';
 import { StepperTitle } from '@/components/Stepper/StepperTitle';
-import { AccountDetails, BillingDetails, PlanDetails } from '@/components/Stepper/Steps';
+import { AccountDetails, BillingDetails, EssentialsAcademicSelection, PlanDetails } from '@/components/Stepper/Steps';
 import { CheckoutSubstepKey } from '@/constants/checkout';
 import useCurrentStep from '@/hooks/useCurrentStep';
+import { isFeatureEnabled } from '@/utils/common';
 
-const Steps = (): ReactElement => (
-  <>
-    <PlanDetails />
-    <AccountDetails />
-    <BillingDetails />
-  </>
-);
+const Steps = (): ReactElement => {
+  const {
+    FEATURE_SELF_SERVICE_ESSENTIALS,
+    FEATURE_SELF_SERVICE_ESSENTIALS_KEY,
+  } = getConfig();
+  console.log(isFeatureEnabled(FEATURE_SELF_SERVICE_ESSENTIALS, FEATURE_SELF_SERVICE_ESSENTIALS_KEY));
+  return (
+    <>
+      {
+        isFeatureEnabled(
+          FEATURE_SELF_SERVICE_ESSENTIALS,
+          FEATURE_SELF_SERVICE_ESSENTIALS_KEY,
+        ) && <EssentialsAcademicSelection />
+      }
+      <PlanDetails />
+      <AccountDetails />
+      <BillingDetails />
+    </>
+  );
+};
 
 const CheckoutStepperContainer = (): ReactElement => {
   const { currentStepKey, currentSubstepKey } = useCurrentStep();
-
   useEffect(() => {
     const preventUnload = (e: BeforeUnloadEvent) => {
       if (currentSubstepKey !== CheckoutSubstepKey.Success) {

src/components/Stepper/StepperContent/EssentialsAcademicSelectionContent.tsx

@@ -0,0 +1,16 @@
+import type { UseFormReturn } from "react-hook-form";
+
+interface EssentialsAcademicSelectionContentProps {
+  form: UseFormReturn<EssentialAcademicSelectionData>;
+}
+
+const EssentialsAcademicSelectionContent = ({ form }: EssentialsAcademicSelectionContentProps) => {
+  return (
+    <>
+      Essentials Academic Selection
+    </>
+  );
+};
+
+
+export default EssentialsAcademicSelectionContent;

src/components/Stepper/StepperContent/index.ts

@@ -4,3 +4,4 @@ export { default as PlanDetailsRegisterContent } from './PlanDetailsRegisterCont
 export { default as AccountDetailsContent } from './AccountDetailsContent';
 export { default as BillingDetailsContent } from './BillingDetailsContent';
 export { default as BillingDetailsSuccessContent } from './BillingDetailsSuccessContent';
+export { default as EssentialsAcademicSelectionContent } from './EssentialsAcademicSelectionContent';

src/components/Stepper/Steps/EssentialsAcademicSelection.tsx

@@ -0,0 +1,8 @@
+import { EssentialsAcademicSelectionPage} from "@/components/academic-selection-page";
+
+// TODO: unnecessary layer of abstraction, just move component logic into this file.
+const EssentialsAcademicSelection: React.FC = () => (
+  <EssentialsAcademicSelectionPage />
+);
+
+export default EssentialsAcademicSelection;

src/components/Stepper/Steps/hooks/useStepperContent.tsx

@@ -2,6 +2,7 @@ import {
   AccountDetailsContent,
   BillingDetailsContent,
   BillingDetailsSuccessContent,
+  EssentialsAcademicSelectionContent,
   PlanDetailsContent,
   PlanDetailsLoginContent,
   PlanDetailsRegisterContent,
@@ -12,6 +13,7 @@ import useCurrentPage from '@/hooks/useCurrentPage';
 type StepperContentComponent = React.FC<{ form?: any }>;
 
 const StepperContentByPage = {
+  EssentialsAcademicSelection: EssentialsAcademicSelectionContent,
   PlanDetails: PlanDetailsContent,
   PlanDetailsLogin: PlanDetailsLoginContent,
   PlanDetailsRegister: PlanDetailsRegisterContent,

src/components/Stepper/Steps/index.ts

@@ -1,3 +1,4 @@
 export { default as PlanDetails } from './PlanDetails';
 export { default as AccountDetails } from './AccountDetails';
 export { default as BillingDetails } from './BillingDetails';
+export { default as EssentialsAcademicSelection } from './EssentialsAcademicSelection';

src/components/academic-selection-page/EssentialsAcademicSelectionPage.tsx

@@ -0,0 +1,45 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Stack, Stepper } from '@openedx/paragon';
+import { useMemo } from 'react';
+import { Helmet } from 'react-helmet';
+import { useForm } from 'react-hook-form';
+
+import { useFormValidationConstraints } from '@/components/app/data';
+import { useStepperContent } from '@/components/Stepper/Steps/hooks';
+import { CheckoutStepKey, DataStoreKey } from '@/constants/checkout';
+import { useCheckoutFormStore, useCurrentPageDetails } from '@/hooks/index';
+
+const EssentialsAcademicSelectionPage = () => {
+  const StepperContent = useStepperContent();
+  const { data: formValidationConstraints } = useFormValidationConstraints();
+  const eventKey = CheckoutStepKey.Essentials;
+  const {
+    formSchema,
+  } = useCurrentPageDetails();
+  const essentialsFormData = useCheckoutFormStore((state) => state.formData[DataStoreKey.EssentialsAcademicSelection]);
+
+  const essentialsAcademicSelectionSchema = useMemo(() => (
+    formSchema(formValidationConstraints)
+  ), [formSchema, formValidationConstraints]);
+
+  const form = useForm<EssentialAcademicSelectionData>({
+    mode: 'onTouched',
+    resolver: zodResolver(essentialsAcademicSelectionSchema),
+    defaultValues: essentialsFormData,
+  });
+
+  return (
+    <>
+      <Helmet title="Academic Selection Page" />
+      <Stack gap={4}>
+        <Stepper.Step eventKey={eventKey} title="Academic Selection Page">
+          <Stack gap={4}>
+            <StepperContent form={form} />
+          </Stack>
+        </Stepper.Step>
+      </Stack>
+    </>
+  );
+};
+
+export default EssentialsAcademicSelectionPage;

src/components/academic-selection-page/index.ts

@@ -0,0 +1 @@
+export { default as EssentialsAcademicSelectionPage } from './EssentialsAcademicSelectionPage'

src/components/account-details-page/AccountDetailsPage.tsx

@@ -13,6 +13,7 @@ import { Helmet } from 'react-helmet';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
+import AccountDetailsSubmitButton from './AccountDetailsSubmitButton';
 import { useCheckoutIntent, useFormValidationConstraints } from '@/components/app/data';
 import { useCreateCheckoutSessionMutation } from '@/components/app/data/hooks';
 import { queryBffContext, queryBffSuccess } from '@/components/app/data/queries/queries';
@@ -29,7 +30,6 @@ import {
 } from '@/hooks/index';
 import { sendEnterpriseCheckoutTrackingEvent } from '@/utils/common';
 
-import AccountDetailsSubmitButton from './AccountDetailsSubmitButton';
 
 const AccountDetailsPage: React.FC = () => {
   const { data: formValidationConstraints } = useFormValidationConstraints();

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

@@ -8,6 +8,10 @@ import { CheckoutPageRoute, DataStoreKey } from '@/constants/checkout';
 import { checkoutFormStore } from '@/hooks/useCheckoutFormStore';
 import { extractPriceId, getCheckoutPageDetails, getStepFromParams } from '@/utils/checkout';
 
+async function essentialsAcademicSelectionLoader(): Promise<Response | null> {
+  return null;
+}
+
 /**
  * Route loader for Plan Details page.
  *
@@ -169,6 +173,7 @@ async function billingDetailsSuccessLoader(queryClient: QueryClient): Promise<Re
  * Page-specific route loaders mapped by checkout page
  */
 const PAGE_LOADERS: Record<CheckoutPage, (queryClient: QueryClient) => Promise<Response | null>> = {
+  EssentialsAcademicSelection: essentialsAcademicSelectionLoader,
   PlanDetails: planDetailsLoader,
   PlanDetailsLogin: planDetailsLoginLoader,
   PlanDetailsRegister: planDetailsRegisterLoader,

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

@@ -15,6 +15,7 @@ import {
 } from '@/components/app/routes/loaders/utils';
 import { CheckoutPageRoute, EssentialsPageRoute } from '@/constants/checkout';
 import { extractPriceId } from '@/utils/checkout';
+import { isFeatureEnabled } from '@/utils/common';
 
 /**
  * Factory that creates the root route loader for the Enterprise Checkout MFE.
@@ -89,12 +90,9 @@ const makeRootLoader = (
   if (routeFeatureKey) {
     const sessionKey = sessionStorage.getItem(SSP_SESSION_KEY);
 
-    const isUnlockedBySiteKey = !!FEATURE_SELF_SERVICE_SITE_KEY
-        && sessionKey === FEATURE_SELF_SERVICE_SITE_KEY;
+    const isUnlocked = isFeatureEnabled(false, routeFeatureKey);
 
-    const isUnlockedByRouteKey = sessionKey === routeFeatureKey;
-
-    if (!isUnlockedBySiteKey && !isUnlockedByRouteKey) {
+    if (!isUnlocked) {
       const featureParam = new URL(request.url).searchParams.get('feature');
 
       const paramIsSiteKey = !!FEATURE_SELF_SERVICE_SITE_KEY
@@ -121,11 +119,11 @@ const makeRootLoader = (
    * Essentials routes do not participate in checkout intent logic.
    * This check happens AFTER feature flag validation.
    */
-  const isCheckoutRoute = !Object.values(EssentialsPageRoute).some(route => isPathMatch(currentPath, route));
-
-  if (!isCheckoutRoute) {
-    return null;
-  }
+  // const isCheckoutRoute = !Object.values(EssentialsPageRoute).some(route => isPathMatch(currentPath, route));
+  //
+  // if (!isCheckoutRoute) {
+  //   return null;
+  // }
 
   // Fetch basic info about authenticated user from JWT token, and also hydrate it with additional
   // information from the `<LMS>/api/user/v1/accounts/<username>` endpoint. We need access to the

src/components/app/routes/tests/rootLoader.test.ts

@@ -197,7 +197,7 @@ describe('makeRootLoader (rootLoader) tests', () => {
       FEATURE_SELF_SERVICE_ESSENTIALS_KEY: 'essentials-key',
     });
 
-    const result = getFeatureForPath(EssentialsPageRoute.AcademicSelection);
+    const result = getFeatureForPath(EssentialsPageRoute.EssentialsAcademicSelection);
     expect(result).toBe('essentials-key');
   });
 
@@ -236,7 +236,7 @@ describe('makeRootLoader (rootLoader) tests', () => {
     const loader = makeRootLoader(queryClient);
 
     const result = await loader({
-      request: makeRequest(`${EssentialsPageRoute.AcademicSelection}?feature=SSP_ESSENTIALS_CHECKOUT`),
+      request: makeRequest(`${EssentialsPageRoute.EssentialsAcademicSelection}?feature=SSP_ESSENTIALS_CHECKOUT`),
     } as any);
 
     expect(logInfo).toHaveBeenCalledWith(
@@ -259,7 +259,7 @@ describe('makeRootLoader (rootLoader) tests', () => {
     const loader = makeRootLoader(queryClient);
 
     await expect(
-      loader({ request: makeRequest(EssentialsPageRoute.AcademicSelection) } as any),
+      loader({ request: makeRequest(EssentialsPageRoute.EssentialsAcademicSelection) } as any),
     ).rejects.toThrow('Self-service purchasing is not enabled');
 
     expect(logError).toHaveBeenCalledWith('Self-service purchasing is not enabled');
@@ -277,7 +277,7 @@ describe('makeRootLoader (rootLoader) tests', () => {
     const loader = makeRootLoader(queryClient);
 
     const result = await loader({
-      request: makeRequest(`${EssentialsPageRoute.AcademicSelection}?feature=SSP_ESSENTIALS_CHECKOUT`),
+      request: makeRequest(`${EssentialsPageRoute.EssentialsAcademicSelection}?feature=SSP_ESSENTIALS_CHECKOUT`),
     } as any);
 
     expect(logInfo).toHaveBeenCalledWith(
@@ -301,7 +301,7 @@ describe('makeRootLoader (rootLoader) tests', () => {
 
     const result = await loader({
       request: makeRequest(
-        `${EssentialsPageRoute.AcademicSelection}?feature=SSP_SITE_CHECKOUT`,
+        `${EssentialsPageRoute.EssentialsAcademicSelection}?feature=SSP_SITE_CHECKOUT`,
       ),
     } as any);
 

src/constants/checkout.ts

@@ -6,12 +6,14 @@ import { validateFieldDetailed } from '@/components/app/data/services/validation
 import { serverValidationError } from '@/utils/common';
 
 export enum CheckoutStepKey {
+  Essentials = 'essentials',
   PlanDetails = 'plan-details',
   AccountDetails = 'account-details',
   BillingDetails = 'billing-details',
 }
 
 export enum CheckoutSubstepKey {
+  AcademicSelection = 'academic-selection',
   Login = 'login',
   Register = 'register',
   Success = 'success',
@@ -279,9 +281,15 @@ export const BillingDetailsSchema = (constraints: CheckoutContextFieldConstraint
 // Simple empty schema - no validation needed for coming soon page
 // @ts-ignore
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const AcademicSelectionSchema = (constraints: CheckoutContextFieldConstraints) => (z.object({}));
+export const EssentialsAcademicSelectionSchema = (constraints: CheckoutContextFieldConstraints) => (z.object({}));
+
+// NEW ROUTES - Essentials flow
+export const EssentialsPageRoute = {
+  EssentialsAcademicSelection: `/${CheckoutStepKey.Essentials}/${CheckoutSubstepKey.AcademicSelection}`,
+} as const;
 
 export const CheckoutPageRoute = {
+  ...EssentialsPageRoute,
   PlanDetails: `/${CheckoutStepKey.PlanDetails}`,
   PlanDetailsLogin: `/${CheckoutStepKey.PlanDetails}/${CheckoutSubstepKey.Login}`,
   PlanDetailsRegister: `/${CheckoutStepKey.PlanDetails}/${CheckoutSubstepKey.Register}`,
@@ -290,18 +298,14 @@ export const CheckoutPageRoute = {
   BillingDetailsSuccess: `/${CheckoutStepKey.BillingDetails}/${CheckoutSubstepKey.Success}`,
 } as const;
 
-// NEW ROUTES - Essentials flow
-export const EssentialsPageRoute = {
-  AcademicSelection: `/essentials/${EssentialsStepKey.AcademicSelection}`,
-} as const;
 
 // NEW PAGE DETAILS - Essentials flow
 export const EssentialsPageDetails = {
-  AcademicSelection: {
-    step: 'AcademicSelection',
-    substep: undefined,
-    formSchema: AcademicSelectionSchema,
-    route: EssentialsPageRoute.AcademicSelection,
+  EssentialsAcademicSelection: {
+    step: 'Essentials',
+    substep: 'AcademicSelection',
+    formSchema: EssentialsAcademicSelectionSchema,
+    route: EssentialsPageRoute.EssentialsAcademicSelection,
     title: defineMessages({
       id: 'essentials.academicSelection.title',
       defaultMessage: 'Academic Selection',
@@ -312,6 +316,7 @@ export const EssentialsPageDetails = {
 } as const;
 
 export const CheckoutPageDetails: { [K in CheckoutPage]: CheckoutPageDetails } = {
+  ...EssentialsPageDetails,
   PlanDetails: {
     step: 'PlanDetails',
     substep: undefined,
@@ -413,12 +418,14 @@ export const authenticatedSteps = [
 ] as const;
 
 export enum DataStoreKey {
+  EssentialsAcademicSelection = 'EssentialsAcademicSelection',
   PlanDetails = 'PlanDetails',
   AccountDetails = 'AccountDetails',
   BillingDetails = 'BillingDetails',
 }
 
 export enum SubmitCallbacks {
+  EssentialsAcademicSelection = 'EssentialsAcademicSelection',
   PlanDetails = 'PlanDetails',
   PlanDetailsLogin = 'PlanDetailsLogin',
   PlanDetailsRegister = 'PlanDetailsRegister',