fix: removes duplicate redirect

src/components/course/routes/CoursePageRoutes.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { Switch, useRouteMatch } from 'react-router-dom';
 import { PageRoute } from '@edx/frontend-platform/react';
-
-import CourseAbout from './CourseAbout';
 import ExternalCourseEnrollment from './ExternalCourseEnrollment';
 import ExternalCourseEnrollmentConfirmation from './ExternalCourseEnrollmentConfirmation';
+import CourseAbout from './CourseAbout';
 import NotFoundPage from '../../NotFoundPage';
 
 const CoursePageRoutes = () => {

src/components/course/routes/ExternalCourseEnrollment.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useRef } from 'react';
-import { useHistory } from 'react-router-dom';
+import { generatePath, useHistory, useRouteMatch } from 'react-router-dom';
 import {
   Alert, Button, Col, Container, Hyperlink, Row,
 } from '@edx/paragon';
@@ -20,6 +20,7 @@ import { features } from '../../../config';
 const ExternalCourseEnrollment = () => {
   const config = getConfig();
   const history = useHistory();
+  const routeMatch = useRouteMatch();
   const {
     state: {
       activeCourseRun,
@@ -31,9 +32,13 @@ const ExternalCourseEnrollment = () => {
     externalCourseFormSubmissionError,
   } = useContext(CourseContext);
   const {
-    enterpriseConfig: { authOrgId },
+    enterpriseConfig: { authOrgId, slug },
   } = useContext(AppContext);
   const { redeemableLearnerCreditPolicies } = useContext(UserSubsidyContext);
+  const completeEnrollmentUrl = generatePath(
+      `${routeMatch.path}/complete`,
+      { enterpriseSlug: slug, courseType: course.courseType, courseKey: course.key },
+  );
   const isCourseAssigned = useIsCourseAssigned(redeemableLearnerCreditPolicies?.learnerContentAssignments, course?.key);
 
   const courseMetadata = useMinimalCourseMetadata();
@@ -62,15 +67,14 @@ const ExternalCourseEnrollment = () => {
     }
   }, [externalCourseFormSubmissionError, containerRef]);
 
-  const handleCheckoutSuccess = () => {
-    history.push('enroll/complete');
-  };
-
   useEffect(() => {
+    // Once a redemption has successfully completed and the can-redeem query has been invalidated or
+    // a user attempts to navigate directly to :slug/executive-education-2u/course/:courseKey/enroll,
+    //  it will run this conditional and perform the redirect
     if (hasSuccessfulRedemption) {
-      history.push('enroll/complete');
+      history.push({ pathname: completeEnrollmentUrl });
     }
-  }, [hasSuccessfulRedemption, history]);
+  }, [completeEnrollmentUrl, course.key, hasSuccessfulRedemption, history, routeMatch.path, slug]);
 
   return (
     <div className="fill-vertical-space page-light-bg">
@@ -120,7 +124,6 @@ const ExternalCourseEnrollment = () => {
               <RegistrationSummaryCard priceDetails={courseMetadata.priceDetails} />
               <UserEnrollmentForm
                 productSKU={courseEntitlementProductSku}
-                onCheckoutSuccess={handleCheckoutSuccess}
                 activeCourseRun={activeCourseRun}
                 userSubsidyApplicableToCourse={userSubsidyApplicableToCourse}
               />

src/components/executive-education-2u/UserEnrollmentForm.jsx

@@ -70,7 +70,9 @@ const UserEnrollmentForm = ({
     await queryClient.invalidateQueries({
       queryKey: enterpriseUserSubsidyQueryKeys.policy(),
     });
-    onCheckoutSuccess(newTransaction);
+    if (onCheckoutSuccess) {
+      onCheckoutSuccess(newTransaction);
+    }
   };
 
   const { redeem } = useStatefulEnroll({
@@ -394,7 +396,7 @@ const UserEnrollmentForm = ({
 UserEnrollmentForm.propTypes = {
   className: PropTypes.string,
   productSKU: PropTypes.string.isRequired,
-  onCheckoutSuccess: PropTypes.func.isRequired,
+  onCheckoutSuccess: PropTypes.func,
   activeCourseRun: PropTypes.shape({
     key: PropTypes.string.isRequired,
   }).isRequired,
@@ -406,6 +408,7 @@ UserEnrollmentForm.propTypes = {
 UserEnrollmentForm.defaultProps = {
   className: undefined,
   userSubsidyApplicableToCourse: undefined,
+  onCheckoutSuccess: undefined,
 };
 
 export default UserEnrollmentForm;