Update styled enrolled button not to show arrow (#3372)

* Update styled enrolled button not to show arrow

Author: annagav

frontends/main/src/app-pages/ProductPages/ProgramEnrollmentButton.test.tsx

@@ -217,6 +217,82 @@ describe("ProgramEnrollmentButton", () => {
     expect(button).toHaveTextContent(ENROLL_PROGRAM)
   })
 
+  test("Hides arrow icon when showArrowIcon is false", async () => {
+    const program = makeProgram({
+      enrollment_modes: [makeEnrollmentMode({ requires_payment: true })],
+      products: [makeProduct({ price: "500" })],
+    })
+
+    setMockResponse.get(mitxUrls.programEnrollments.enrollmentsListV3(), [])
+    setMockResponse.get(
+      urls.userMe.get(),
+      makeUser({ is_authenticated: false }),
+    )
+
+    renderWithProviders(
+      <ProgramEnrollmentButton
+        program={program}
+        variant="primary"
+        showArrowIcon={false}
+      />,
+    )
+
+    await screen.findByRole("button", { name: ENROLL_PROGRAM })
+    expect(screen.queryByTestId("program-enroll-arrow-icon")).toBeNull()
+  })
+
+  test("Still shows loading spinner when showArrowIcon is false", async () => {
+    const product = makeProduct({ price: "500" })
+    const program = makeProgram({
+      enrollment_modes: [makeEnrollmentMode({ requires_payment: true })],
+      products: [product],
+    })
+
+    setMockResponse.get(mitxUrls.programEnrollments.enrollmentsListV3(), [])
+    setMockResponse.get(urls.userMe.get(), makeUser({ is_authenticated: true }))
+    const { promise } = Promise.withResolvers()
+    setMockResponse.delete(mitxUrls.baskets.clear(), promise)
+
+    renderWithProviders(
+      <ProgramEnrollmentButton
+        program={program}
+        variant="primary"
+        showArrowIcon={false}
+      />,
+    )
+
+    const button = await screen.findByRole("button", { name: ENROLL_PROGRAM })
+    await user.click(button)
+
+    await screen.findByRole("progressbar", { name: "Loading" })
+    expect(screen.queryByTestId("program-enroll-arrow-icon")).toBeNull()
+  })
+
+  test("Still shows loading spinner during initial loading when showArrowIcon is false", async () => {
+    const program = makeProgram({
+      enrollment_modes: [makeEnrollmentMode({ requires_payment: false })],
+    })
+    const enrollmentResponse = Promise.withResolvers()
+    const userResponse = Promise.withResolvers()
+
+    setMockResponse.get(
+      mitxUrls.programEnrollments.enrollmentsListV3(),
+      enrollmentResponse.promise,
+    )
+    setMockResponse.get(urls.userMe.get(), userResponse.promise)
+
+    renderWithProviders(
+      <ProgramEnrollmentButton
+        program={program}
+        variant="primary"
+        showArrowIcon={false}
+      />,
+    )
+
+    await screen.findByRole("progressbar", { name: "Loading" })
+    expect(screen.queryByTestId("program-enroll-arrow-icon")).toBeNull()
+  })
+
   test("Shows error alert when basket operation fails (paid)", async () => {
     const product = makeProduct({ price: "500" })
     const program = makeProgram({

frontends/main/src/app-pages/ProductPages/ProgramEnrollmentButton.tsx

@@ -54,12 +54,14 @@ type ProgramEnrollmentButtonProps = {
   variant?: ButtonProps["variant"]
   className?: string
   displayAsCourse?: boolean
+  showArrowIcon?: boolean
 }
 const ProgramEnrollmentButton: React.FC<ProgramEnrollmentButtonProps> = ({
   program,
   variant = "primary",
   className,
   displayAsCourse,
+  showArrowIcon = true,
 }) => {
   const [anchor, setAnchor] = React.useState<null | HTMLButtonElement>(null)
   const me = useQuery(userQueries.me())
@@ -148,11 +150,11 @@ const ProgramEnrollmentButton: React.FC<ProgramEnrollmentButtonProps> = ({
             endIcon={
               isLoading || isPending ? (
                 <LoadingSpinner size="16px" loading={true} color="inherit" />
-              ) : (
-                <EnrollButtonIcon>
+              ) : showArrowIcon ? (
+                <EnrollButtonIcon data-testid="program-enroll-arrow-icon">
                   <RiArrowRightSLine aria-hidden="true" />
                 </EnrollButtonIcon>
-              )
+              ) : undefined
             }
           >
             {isLoading ? null : enrollButtonLabel}

frontends/main/src/app-pages/ProductPages/ProgramPage.tsx

@@ -295,7 +295,11 @@ const ProgramPage: React.FC<ProgramPageProps> = ({ readableId }) => {
       imageSrc={imageSrc}
       videoUrl={page.video_url}
       enrollmentAction={
-        <StyledProgramEnrollmentButton program={program} variant="bordered" />
+        <StyledProgramEnrollmentButton
+          program={program}
+          variant="bordered"
+          showArrowIcon={false}
+        />
       }
       showStayUpdated={
         program.enrollment_modes.length > 0 &&