feat: add authenticated routes

brobro10000 · brobro10000 · commit 6e79e895a5d8 · 2025-07-16T10:45:19.000-04:00
diff --git a/src/components/FormFields/Field.tsx b/src/components/FormFields/Field.tsx
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
diff --git a/src/components/Stepper/CheckoutStepper.tsx b/src/components/Stepper/CheckoutStepper.tsx
@@ -1,20 +1,28 @@
 import { Stepper } from '@openedx/paragon';
 import { Navigate, useParams } from 'react-router-dom';
 
-import PlanDetails from '@/components/PlanDetails';
-import AccountDetails from '@/components/AccountDetails';
+import {
+  BuildTrial,
+  CreateAccount,
+  CreateAccessLink,
+  StartTrial,
+  Success,
+} from '@/components/Stepper/Steps';
 
 const Steps: React.FC = () => (
   <div className="py-4">
-    <PlanDetails />
-    <AccountDetails />
+    <BuildTrial />
+    <CreateAccount />
+    <CreateAccessLink />
+    <StartTrial />
+    <Success />
   </div>
 );
 
 const CheckoutStepper: React.FC = () => {
   const { step } = useParams<{ step: Step }>();
   if (!step) {
-    return <Navigate to="plan" />;
+    return <Navigate to="build-trial" />;
   }
   return (
     <Stepper activeKey={step}>
diff --git a/src/components/Stepper/StepCounter.tsx b/src/components/Stepper/StepCounter.tsx
@@ -1,7 +1,7 @@
 import { useParams } from 'react-router';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-import { steps } from '@/constants';
+import { steps } from '@/components/Stepper/constants';
 
 const StepCounter: React.FC = () => {
   const { step } = useParams<{ step: Step }>();
diff --git a/src/components/Stepper/Steps/BuildTrial.tsx b/src/components/Stepper/Steps/BuildTrial.tsx
@@ -7,19 +7,19 @@ import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-import { PlanSchema, steps } from '@/constants';
-import Field, { useIsFieldInvalid, useIsFieldValid } from '@/components/Field';
-import StepCounter from '@/components/StepCounter';
+import { BuildTrialSchema, steps } from '@/components/Stepper/constants';
+import Field, { useIsFieldInvalid, useIsFieldValid } from '@/components/FormFields/Field';
+import StepCounter from '@/components/Stepper/StepCounter';
 import useCheckoutFormStore from '@/hooks/useCheckoutFormStore';
 
-const PlanDetails: React.FC = () => {
-  const planFormData = useCheckoutFormStore((state) => state.formData.plan);
+const BuildTrial: React.FC = () => {
+  const planFormData = useCheckoutFormStore((state) => state.formData.buildTrial);
   const setFormData = useCheckoutFormStore((state) => state.setFormData);
   const navigate = useNavigate();
 
-  const form = useForm<PlanData>({
+  const form = useForm<BuildTrial>({
     mode: 'onTouched',
-    resolver: zodResolver(PlanSchema),
+    resolver: zodResolver(BuildTrialSchema),
     defaultValues: planFormData,
   });
   const {
@@ -28,9 +28,9 @@ const PlanDetails: React.FC = () => {
     formState: { isValid },
   } = form;
 
-  const onSubmit = (data: PlanData) => {
-    setFormData('plan', data);
-    navigate('/checkout/account');
+  const onSubmit = (data: BuildTrial) => {
+    setFormData('buildTrial', data);
+    navigate('/create-account');
   };
 
   const isFieldValid = useIsFieldValid(form);
@@ -61,6 +61,7 @@ const PlanDetails: React.FC = () => {
               registerOptions={{
                 validate: () => {
                   // Check react-hook-form docs for more info...
+                  console.log('validating users');
                 },
               }}
               autoFocus
@@ -86,7 +87,7 @@ const PlanDetails: React.FC = () => {
                     ariaLabelledby="planTypeLabel"
                     value={value}
                     onChange={(e) => {
-                      setFormData('plan', {
+                      setFormData('buildTrial', {
                         ...planFormData,
                         planType: e.target.value as PlanType,
                       });
@@ -150,4 +151,4 @@ const PlanDetails: React.FC = () => {
   );
 };
 
-export default PlanDetails;
+export default BuildTrial;
diff --git a/src/components/Stepper/Steps/CreateAccessLink.tsx b/src/components/Stepper/Steps/CreateAccessLink.tsx
@@ -0,0 +1,13 @@
+import { Stepper } from '@openedx/paragon';
+import { steps } from '@/components/Stepper/constants';
+
+const CreateAccessLink = () => {
+  const eventKey = steps[2];
+  return (
+    <Stepper.Step eventKey={eventKey} title="Create Access Link">
+      Create Access Link
+    </Stepper.Step>
+  );
+};
+
+export default CreateAccessLink;
diff --git a/src/components/Stepper/Steps/CreateAccount.tsx b/src/components/Stepper/Steps/CreateAccount.tsx
@@ -14,9 +14,9 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import slugify from 'slugify';
 import classNames from 'classnames';
 
-import { AccountSchema, PlanSchema, steps } from '@/constants';
-import Field from '@/components/Field';
-import StepCounter from '@/components/StepCounter';
+import { CreateAccountSchema, BuildTrialSchema, steps } from '@/components/Stepper/constants';
+import Field from '@/components/FormFields/Field';
+import StepCounter from '@/components/Stepper/StepCounter';
 import useCheckoutFormStore from '@/hooks/useCheckoutFormStore';
 
 interface StatefulPurchaseButtonProps {
@@ -73,7 +73,7 @@ interface OrganizatonEmailHelpTextProps {
   isInvalid: boolean;
 }
 
-const OrganizatonEmailHelpText: React.FC<OrganizatonEmailHelpTextProps> = ({ isInvalid }) => {
+const OrganizationEmailHelpText: React.FC<OrganizatonEmailHelpTextProps> = ({ isInvalid }) => {
   if (isInvalid) {
     return null;
   }
@@ -88,19 +88,19 @@ const OrganizatonEmailHelpText: React.FC<OrganizatonEmailHelpTextProps> = ({ isI
   );
 };
 
-OrganizatonEmailHelpText.propTypes = {
+OrganizationEmailHelpText.propTypes = {
   isInvalid: PropTypes.bool.isRequired,
 };
 
-const AccountDetails: React.FC = () => {
+const CreateAccount: React.FC = () => {
   const intl = useIntl();
   const navigate = useNavigate();
-  const planFormData = useCheckoutFormStore((state) => state.formData.plan);
-  const accountFormData = useCheckoutFormStore((state) => state.formData.account);
+  const planFormData = useCheckoutFormStore((state) => state.formData.buildTrial);
+  const accountFormData = useCheckoutFormStore((state) => state.formData.createAccount);
 
   useEffect(() => {
-    if (!planFormData || !PlanSchema.safeParse(planFormData).success) {
-      navigate('/checkout/plan');
+    if (!planFormData || !BuildTrialSchema.safeParse(planFormData).success) {
+      navigate('/build-trial');
     }
   }, [planFormData, navigate]);
 
@@ -127,12 +127,12 @@ const AccountDetails: React.FC = () => {
   }, [isEditingSlug]);
 
   const handlePrevious = () => {
-    navigate('/checkout/plan');
+    navigate('/build-trial');
   };
 
-  const onSubmit = (data: AccountData) => {
-    setFormData('account', data);
-    navigate('/checkout/confirmation');
+  const onSubmit = (data: CreateAccount) => {
+    setFormData('createAccount', data);
+    navigate('/create-access-link');
   };
 
   const orgName = watch('orgName');
@@ -198,7 +198,7 @@ const AccountDetails: React.FC = () => {
               placeholder="john.doe@organization.com"
               defaultValue={accountFormData?.orgEmail}
               controlClassName="mr-0"
-              controlFooterNode={OrganizatonEmailHelpText}
+              controlFooterNode={OrganizationEmailHelpText}
             />
             <Field
               form={form}
@@ -389,4 +389,4 @@ const AccountDetails: React.FC = () => {
   );
 };
 
-export default AccountDetails;
+export default CreateAccount;
diff --git a/src/components/Stepper/Steps/StartTrial.tsx b/src/components/Stepper/Steps/StartTrial.tsx
@@ -0,0 +1,13 @@
+import { steps } from '@/components/Stepper/constants';
+import { Stepper } from '@openedx/paragon';
+
+const StartTrial = () => {
+  const eventKey = steps[3];
+  return (
+    <Stepper.Step eventKey={eventKey} title="Create Trial">
+      Start Trial
+    </Stepper.Step>
+  );
+};
+
+export default StartTrial;
diff --git a/src/components/Stepper/Steps/Success.tsx b/src/components/Stepper/Steps/Success.tsx
@@ -0,0 +1,13 @@
+import { steps } from '@/components/Stepper/constants';
+import { Stepper } from '@openedx/paragon';
+
+const Success = () => {
+  const eventKey = steps[4];
+  return (
+    <Stepper.Step eventKey={eventKey} title="Success">
+      Success
+    </Stepper.Step>
+  );
+};
+
+export default Success;
diff --git a/src/components/Stepper/Steps/index.tsx b/src/components/Stepper/Steps/index.tsx
@@ -0,0 +1,5 @@
+export { default as BuildTrial } from './BuildTrial';
+export { default as CreateAccount } from './CreateAccount';
+export { default as CreateAccessLink } from './CreateAccessLink';
+export { default as StartTrial } from './StartTrial';
+export { default as Success } from './Success';
diff --git a/src/components/Stepper/constants.ts b/src/components/Stepper/constants.ts
@@ -1,23 +1,32 @@
 import { z } from 'zod';
 
-export const steps = [
-  'plan',
-  'account',
+export const authenticatedSteps: AuthStep[] = [
+  'create-access-link',
+  'start-trial',
+  'success',
 ] as const;
 
+export const steps = [
+  'build-trial',
+  'create-account',
+  'create-access-link',
+  'start-trial',
+  'success',
+];
+
 export const planTypes = [
   'annual',
   'quarterly',
 ] as const;
 
-export const PlanSchema = z.object({
+export const BuildTrialSchema = z.object({
   numUsers: z.coerce.number()
     .min(5, 'Minimum 5 users')
     .max(500, 'Maximum 500 users'),
   planType: z.enum(planTypes),
 });
 
-export const AccountSchema = z.object({
+export const CreateAccountSchema = z.object({
   fullName: z.string().trim()
     .min(1, 'Full name is required')
     .max(255),
@@ -38,6 +47,12 @@ export const AccountSchema = z.object({
     .min(1, 'Country is required'),
 });
 
+export const CreateAccessLinkSchema = z.object({});
+
+export const StartTrialSchema = z.object({});
+
+export const SuccessSchema = z.object({});
+
 // TODO: these should be fetched from the Stripe, likely via
 // an exposed REST API endpoint on the server.
 export const SUBSCRIPTION_ANNUAL_PRICE_PER_USER = 394;
diff --git a/src/components/SubscriptionSummary/Currency.tsx b/src/components/SubscriptionSummary/Currency.tsx
diff --git a/src/components/SubscriptionSummary/SubscriptionSummary.tsx b/src/components/SubscriptionSummary/SubscriptionSummary.tsx
@@ -2,8 +2,8 @@ import { Link, useParams } from 'react-router-dom';
 import { Button, Card, Stack } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-import { SUBSCRIPTION_ANNUAL_PRICE_PER_USER } from '@/constants';
-import Currency from '@/components/Currency';
+import { SUBSCRIPTION_ANNUAL_PRICE_PER_USER } from '@/components/Stepper/constants';
+import Currency from '@/components/SubscriptionSummary/Currency';
 import useCheckoutFormStore from '@/hooks/useCheckoutFormStore';
 
 function calculateSubscriptionCost(numUsers?: number) {
@@ -45,13 +45,13 @@ const SubscriptionSummary: React.FC = () => {
                       defaultMessage="Number of users"
                       description="Label for the number of users"
                     />
-                    {step !== 'plan' && (
+                    {step !== 'build-trial' && (
                       <Button
                         as={Link}
                         variant="link"
                         size="inline"
                         className="ml-1"
-                        to="/checkout/plan"
+                        to="/build-trial"
                       >
                         <FormattedMessage
                           id="checkout.subscriptionSummary.editNumUsers"
diff --git a/src/components/SubscriptionSummary/index.tsx b/src/components/SubscriptionSummary/index.tsx
@@ -0,0 +1 @@
+export { default as SubscriptionSummary } from './SubscriptionSummary';
diff --git a/src/components/app/Layout.tsx b/src/components/app/Layout.tsx
@@ -2,7 +2,7 @@ import { Helmet } from 'react-helmet';
 import { Outlet, ScrollRestoration } from 'react-router-dom';
 import FooterSlot from '@openedx/frontend-slot-footer';
 
-import Header from '@/components/Header';
+import Header from '@/components/Header/Header';
 
 const Layout: React.FC = () => (
   <div id="layout">
diff --git a/src/components/checkout-page/CheckoutPage.tsx b/src/components/checkout-page/CheckoutPage.tsx
@@ -1,9 +1,9 @@
 import {
   Col, Container, Row, Stack,
 } from '@openedx/paragon';
-
-import CheckoutStepper from '@/components/CheckoutStepper';
-import SubscriptionSummary from '@/components/SubscriptionSummary';
+import CheckoutStepper from '@/components/Stepper/CheckoutStepper';
+import { SubscriptionSummary } from '@/components/SubscriptionSummary';
+import { CardInterval } from '@/components/carousel';
 
 const CheckoutPage: React.FC = () => (
   <main>
@@ -12,7 +12,7 @@ const CheckoutPage: React.FC = () => (
         <Col xs={12} lg={8}>
           <CheckoutStepper />
         </Col>
-        <Col>
+        <Col lg={4}>
           <Stack gap={4}>
             <SubscriptionSummary />
           </Stack>
diff --git a/src/components/confirmation-page/ConfirmationPage.tsx b/src/components/confirmation-page/ConfirmationPage.tsx
diff --git a/src/routes.tsx b/src/routes.tsx
@@ -1,36 +1,40 @@
 import { QueryClient } from '@tanstack/react-query';
-import { RouteObject } from 'react-router';
+import { RouteObject, useParams } from 'react-router';
 import { AuthenticatedPageRoute, PageWrap } from '@edx/frontend-platform/react';
 import { Suspense } from 'react';
 import Root from '@/components/app/Root';
 import RouterFallback from '@/components/app/routes/RouterFallback';
 import { Navigate } from 'react-router-dom';
-import CheckoutPage from '@/components/CheckoutPage';
-import ConfirmationPage from '@/components/ConfirmationPage';
+import CheckoutPage from '@/components/checkout-page/CheckoutPage';
 import Layout from '@/components/app/Layout';
+import { authenticatedSteps } from '@/components/Stepper/constants';
+
+const StepWrapper = () => {
+  const { step } = useParams<{ step: AuthStep }>();
+
+  return authenticatedSteps.includes(step as AuthStep)
+    ? (
+      <AuthenticatedPageRoute>
+        <CheckoutPage />
+      </AuthenticatedPageRoute>
+    )
+    : <CheckoutPage />;
+};
 
 function getCheckoutRoutes(queryClient: QueryClient) {
   const checkoutChildRoutes: RouteObject[] = [
     {
       index: true,
-      element: <Navigate to="checkout" replace />,
+      element: <Navigate to="build-trial" replace />,
     },
     {
-      path: 'checkout/:step?',
+      path: '/:step?',
       element: (
         <PageWrap>
-          <CheckoutPage />
+          <StepWrapper />
         </PageWrap>
       ),
     },
-    {
-      path: 'checkout/confirmation',
-      element: (
-        <AuthenticatedPageRoute>
-          <ConfirmationPage />
-        </AuthenticatedPageRoute>
-      ),
-    },
   ];
   const checkoutRoutes: RouteObject[] = [
     {
diff --git a/types.d.ts b/types.d.ts
