richie-education 2.28.2-dev39 → 2.28.2-dev53

package/js/components/OpenEdxFullNameForm/index.spec.tsx

@@ -0,0 +1,229 @@
+import { PropsWithChildren } from 'react';
+import { act, screen } from '@testing-library/react';
+import fetchMock from 'fetch-mock';
+import { userEvent } from '@testing-library/user-event';
+import {
+  RichieContextFactory as mockRichieContextFactory,
+  UserFactory,
+} from 'utils/test/factories/richie';
+import { render } from 'utils/test/render';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
+import OpenEdxFullNameForm from 'components/OpenEdxFullNameForm/index';
+import { SaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
+import { SaleTunnelContextFactory } from 'utils/test/factories/joanie';
+import { OpenEdxApiProfileFactory } from 'utils/test/factories/openEdx';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { AppWrapperProps } from 'utils/test/wrappers/types';
+import { expectBannerError } from 'utils/test/expectBanner';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+jest.mock('utils/errors/handle', () => ({
+  handle: jest.fn(),
+}));
+
+describe('OpenEdxFullNameForm', () => {
+  let submitCallbacks: Record<PropertyKey, () => Promise<void>> = {};
+  const Wrapper = ({ children, ...props }: PropsWithChildren<AppWrapperProps>) => (
+    <BaseJoanieAppWrapper {...props}>
+      <SaleTunnelContext.Provider
+        value={SaleTunnelContextFactory({
+          registerSubmitCallback: (key: string, callback: () => Promise<void>) => {
+            submitCallbacks[key] = callback;
+          },
+        }).one()}
+      >
+        {children}
+      </SaleTunnelContext.Provider>
+      ,
+    </BaseJoanieAppWrapper>
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    fetchMock.restore();
+    submitCallbacks = {};
+  });
+  setupJoanieSession();
+
+  it('should not populate form with username', async () => {
+    const user = UserFactory({ full_name: '' }).one();
+    const queryClient = createTestQueryClient({ user });
+    const { 'pref-lang': prefLang, ...profile } = OpenEdxApiProfileFactory({
+      name: user.full_name,
+      username: user.username,
+      email: user.email,
+    }).one();
+    fetchMock.get(`https://auth.test/api/user/v1/accounts/${user.username}`, profile);
+    fetchMock.get(`https://auth.test/api/user/v1/preferences/${user.username}`, {
+      'pref-lang': prefLang,
+    });
+
+    render(<OpenEdxFullNameForm />, {
+      queryOptions: { client: queryClient },
+      wrapper: Wrapper,
+    });
+
+    const $input = await screen.findByRole('textbox', { name: 'Full name' });
+    expect($input).toHaveValue('');
+  });
+
+  it('should populate form with existing full name', async () => {
+    const user = UserFactory().one();
+    const queryClient = createTestQueryClient({ user });
+    const { 'pref-lang': prefLang, ...profile } = OpenEdxApiProfileFactory({
+      name: user.full_name,
+      username: user.username,
+      email: user.email,
+    }).one();
+    fetchMock.get(`https://auth.test/api/user/v1/accounts/${user.username}`, profile);
+    fetchMock.get(`https://auth.test/api/user/v1/preferences/${user.username}`, {
+      'pref-lang': prefLang,
+    });
+
+    render(<OpenEdxFullNameForm />, {
+      queryOptions: { client: queryClient },
+      wrapper: Wrapper,
+    });
+
+    const $input = await screen.findByRole('textbox', { name: 'Full name' });
+    expect($input).toHaveValue(user.full_name);
+  });
+
+  it('should require a value to submit the form', async () => {
+    const user = UserFactory({ full_name: '' }).one();
+    const queryClient = createTestQueryClient({ user });
+    const { 'pref-lang': prefLang, ...profile } = OpenEdxApiProfileFactory({
+      name: user.full_name,
+      username: user.username,
+      email: user.email,
+    }).one();
+    fetchMock.get(`https://auth.test/api/user/v1/accounts/${user.username}`, profile);
+    fetchMock.get(`https://auth.test/api/user/v1/preferences/${user.username}`, {
+      'pref-lang': prefLang,
+    });
+
+    expect(submitCallbacks).toEqual({});
+
+    render(<OpenEdxFullNameForm />, {
+      queryOptions: { client: queryClient },
+      wrapper: Wrapper,
+    });
+
+    expect(submitCallbacks.hasOwnProperty('openEdxFullNameForm')).toBe(true);
+
+    const $input = await screen.findByRole('textbox', { name: 'Full name' });
+    expect($input).toHaveValue('');
+
+    // Submit the form
+    await act(async () => {
+      await expect(submitCallbacks.openEdxFullNameForm()).rejects.not.toBeUndefined();
+    });
+
+    screen.getByText('This field is required.');
+  });
+
+  it('should require a value with at least 3 chars to submit the form', async () => {
+    const user = UserFactory({ full_name: '' }).one();
+    const queryClient = createTestQueryClient({ user });
+    const { 'pref-lang': prefLang, ...profile } = OpenEdxApiProfileFactory({
+      name: user.full_name,
+      username: user.username,
+      email: user.email,
+    }).one();
+    fetchMock.get(`https://auth.test/api/user/v1/accounts/${user.username}`, profile);
+    fetchMock.get(`https://auth.test/api/user/v1/preferences/${user.username}`, {
+      'pref-lang': prefLang,
+    });
+
+    expect(submitCallbacks).toEqual({});
+
+    render(<OpenEdxFullNameForm />, {
+      queryOptions: { client: queryClient },
+      wrapper: Wrapper,
+    });
+
+    expect(submitCallbacks.hasOwnProperty('openEdxFullNameForm')).toBe(true);
+
+    const $input = await screen.findByRole('textbox', { name: 'Full name' });
+    expect($input).toHaveValue('');
+
+    const eventHandler = userEvent.setup();
+    await eventHandler.type($input, 'Jo');
+
+    // Submit the form
+    await act(async () => {
+      await expect(submitCallbacks.openEdxFullNameForm()).rejects.not.toBeUndefined();
+    });
+
+    screen.getByText('The minimum length is 3 chars.');
+  });
+
+  it('should submit the form', async () => {
+    const user = UserFactory({ full_name: '' }).one();
+    const queryClient = createTestQueryClient({ user });
+    const { 'pref-lang': prefLang, ...profile } = OpenEdxApiProfileFactory({
+      name: user.full_name,
+      username: user.username,
+      email: user.email,
+    }).one();
+    fetchMock
+      .get(`https://auth.test/api/user/v1/accounts/${user.username}`, profile)
+      .get(`https://auth.test/api/user/v1/preferences/${user.username}`, {
+        'pref-lang': prefLang,
+      });
+
+    expect(submitCallbacks).toEqual({});
+
+    render(<OpenEdxFullNameForm />, {
+      queryOptions: { client: queryClient },
+      wrapper: Wrapper,
+    });
+
+    expect(submitCallbacks.hasOwnProperty('openEdxFullNameForm')).toBe(true);
+
+    const $input = await screen.findByRole('textbox', { name: 'Full name' });
+    expect($input).toHaveValue('');
+
+    const eventHandler = userEvent.setup();
+    await eventHandler.type($input, 'John Doe');
+
+    // Submit the form
+    fetchMock
+      .patch(`https://auth.test/api/user/v1/accounts/${user.username}`, 200)
+      .patch(`https://auth.test/api/user/v1/preferences/${user.username}`, 200)
+      .get('https://auth.test/api/v1.0/user/me', { ...user, full_name: 'John Doe' })
+      .get(
+        `https://auth.test/api/user/v1/accounts/JohnDoe`,
+        { ...profile, name: 'John Doe' },
+        { overwriteRoutes: true },
+      );
+
+    await act(async () => {
+      await submitCallbacks.openEdxFullNameForm();
+    });
+
+    expect($input).toHaveValue('John Doe');
+  });
+
+  it('should display error if request to retrieve account fails', async () => {
+    const user = UserFactory().one();
+    const queryClient = createTestQueryClient({ user });
+    fetchMock.get(`https://auth.test/api/user/v1/accounts/${user.username}`, 500);
+    fetchMock.get(`https://auth.test/api/user/v1/preferences/${user.username}`, 500);
+
+    render(<OpenEdxFullNameForm />, {
+      queryOptions: { client: queryClient },
+      wrapper: Wrapper,
+    });
+
+    await expectBannerError('An error occurred while fetching your profile. Please retry later.');
+  });
+});

package/js/components/OpenEdxFullNameForm/index.tsx

@@ -9,7 +9,6 @@ import useOpenEdxProfile from 'hooks/useOpenEdxProfile';
 import Form, { getLocalizedCunninghamErrorProp } from 'components/Form';
 import { Spinner } from 'components/Spinner';
 import Banner, { BannerType } from 'components/Banner';
-import { UserHelper } from 'utils/UserHelper';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
 
 const messages = defineMessages({
@@ -51,7 +50,7 @@ export interface OpenEdxFullNameFormValues {
 }
 
 const validationSchema = Yup.object().shape({
-  name: Yup.string().required(),
+  name: Yup.string().required().min(3),
 });
 
 const OpenEdxFullNameForm = () => {
@@ -70,7 +69,7 @@ const OpenEdxFullNameForm = () => {
 
   const defaultValues = useMemo(
     () => ({
-      name: (openEdxProfileData ? UserHelper.getName(openEdxProfileData) : '')?.trim(),
+      name: (openEdxProfileData?.name || '')?.trim(),
     }),
     [openEdxProfileData],
   );
@@ -82,19 +81,20 @@ const OpenEdxFullNameForm = () => {
     resolver: yupResolver(validationSchema),
   });
 
-  const { register, handleSubmit, reset, formState } = form;
+  const { getValues, register, handleSubmit, reset, formState } = form;
 
   useEffect(() => {
     if (openEdxProfileData) {
-      reset({ name: (openEdxProfileData ? UserHelper.getName(openEdxProfileData) : '')?.trim() });
+      reset({ name: (openEdxProfileData?.name || '')?.trim() });
     }
   }, [openEdxProfileData]);
 
   useEffect(() => {
     registerSubmitCallback('openEdxFullNameForm', async () => {
       return new Promise<void>((resolve, reject) => {
+        const { name } = getValues();
         // Don't save if the form has not been modified.
-        if (!formState.isDirty) {
+        if (name && !formState.isDirty) {
           resolve();
           return;
         }
@@ -110,7 +110,7 @@ const OpenEdxFullNameForm = () => {
             },
             onError: (e) => reject(e),
           });
-        })();
+        }, reject)();
       });
     });
     return () => {

package/js/components/PaymentInterfaces/LyraPopIn.tsx

@@ -29,7 +29,7 @@ const LyraPopIn = ({
     if (error && typeof error === 'string') handle(`[LyraPopIn] - ${error}`);
 
     if (shouldAbort.current) {
-      onError(PaymentErrorMessageId.ERROR_ABORTING);
+      onError(PaymentErrorMessageId.ERROR_ABORT);
     } else if (typeof error === 'string') {
       onError(error);
     } else {
@@ -109,7 +109,7 @@ const LyraPopIn = ({
 
     const handleClosePopIn = () => {
       if (shouldAbort.current === true) {
-        onError(PaymentErrorMessageId.ERROR_ABORTING);
+        onError(PaymentErrorMessageId.ERROR_ABORT);
       }
     };
 

package/js/components/PaymentInterfaces/PayplugLightbox.tsx

@@ -27,7 +27,7 @@ const PayplugLightbox = ({
       switch (event.data) {
         case 'closePayPlugFrame':
           ref.current = setTimeout(() => {
-            onError(PaymentErrorMessageId.ERROR_ABORTING);
+            onError(PaymentErrorMessageId.ERROR_ABORT);
           }, 2000);
           break;
       }

package/js/components/PaymentInterfaces/__mocks__/index.tsx

@@ -9,10 +9,7 @@ const PaymentInterface = ({ onError, onSuccess }: PaymentInterfaceProps) => (
     >
       Simulate payment failure
     </button>
-    <button
-      data-testid="payment-abort"
-      onClick={() => onError(PaymentErrorMessageId.ERROR_ABORTING)}
-    >
+    <button data-testid="payment-abort" onClick={() => onError(PaymentErrorMessageId.ERROR_ABORT)}>
       Simulate payment abort
     </button>
     <button data-testid="payment-success" onClick={onSuccess}>

package/js/components/PaymentInterfaces/types.ts

@@ -1,10 +1,13 @@
 export enum PaymentErrorMessageId {
   ERROR_ABORT = 'errorAbort',
-  ERROR_ABORTING = 'errorAborting',
+  ERROR_DEFAULT = 'errorDefault',
+}
+
+export enum SubscriptionErrorMessageId {
+  ERROR_ABORT = 'errorAbort',
   ERROR_ADDRESS = 'errorAddress',
   ERROR_DEFAULT = 'errorDefault',
   ERROR_FULL_PRODUCT = 'errorFullProduct',
-  ERROR_TERMS = 'errorTerms',
 }
 
 export enum PaymentProviders {

package/js/components/PurchaseButton/index.spec.tsx

@@ -4,6 +4,7 @@ import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import userEvent from '@testing-library/user-event';
 import { CunninghamProvider } from '@openfun/cunningham-react';
+import queryString from 'query-string';
 import {
   CourseStateFactory,
   PacedCourseFactory,
@@ -17,7 +18,7 @@ import {
 } from 'utils/test/factories/joanie';
 import { SessionProvider } from 'contexts/SessionContext';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { ProductType } from 'types/Joanie';
+import { NOT_CANCELED_ORDER_STATES, ProductType } from 'types/Joanie';
 import { Priority } from 'types';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { User } from 'types/User';
@@ -102,11 +103,14 @@ describe('PurchaseButton', () => {
   it('shows cta to open sale tunnel when user is authenticated', async () => {
     const courseCode = '00000';
     const product = ProductFactory().one();
+    const orderQueryParameters = {
+      course_code: courseCode,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
     fetchMock
-      .get(
-        `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        {},
-      )
+      .get(url, {})
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
         [],
@@ -142,11 +146,14 @@ describe('PurchaseButton', () => {
     const product = ProductFactory({ remaining_order_count: null }).one();
     fetchMock.get(`https://demo.endpoint/api/user/v1/accounts/${user.username}`, {});
     fetchMock.get(`https://demo.endpoint/api/user/v1/preferences/${user.username}`, {});
+    const orderQueryParameters = {
+      course_code: courseCode,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
     fetchMock
-      .get(
-        `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        {},
-      )
+      .get(url, {})
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
         [],
@@ -180,11 +187,14 @@ describe('PurchaseButton', () => {
   it('shows cta to open sale tunnel when remaining orders is undefined', async () => {
     const courseCode = '00000';
     const product = ProductFactory().one();
+    const orderQueryParameters = {
+      course_code: courseCode,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
     fetchMock
-      .get(
-        `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        {},
-      )
+      .get(url, {})
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
         [],
@@ -220,10 +230,13 @@ describe('PurchaseButton', () => {
   it('renders a disabled CTA if the product have no remaining orders', async () => {
     const courseCode = '00000';
     const product = ProductFactory({ remaining_order_count: 0 }).one();
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-      {},
-    );
+    const orderQueryParameters = {
+      course_code: courseCode,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+    fetchMock.get(url, {});
     render(
       <Wrapper client={createTestQueryClient({ user: richieUser })}>
         <PurchaseButton
@@ -256,10 +269,14 @@ describe('PurchaseButton', () => {
       const courseCode = '00000';
       const product = ProductFactory({ ...productData, type: ProductType.CREDENTIAL }).one();
       product.target_courses[0].course_runs = [];
-      fetchMock.get(
-        `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        {},
-      );
+
+      const orderQueryParameters = {
+        course_code: courseCode,
+        product_id: product.id,
+        state: NOT_CANCELED_ORDER_STATES,
+      };
+      const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+      fetchMock.get(url, {});
 
       render(
         <Wrapper client={createTestQueryClient({ user: richieUser })}>
@@ -305,10 +322,14 @@ describe('PurchaseButton', () => {
       const product = CertificateProductFactory().one();
       const enrollment = EnrollmentFactory().one();
       enrollment.course_run.state = CourseStateFactory(courseRunStateData).one();
-      fetchMock.get(
-        `https://joanie.endpoint/api/v1.0/orders/?enrollment_id=${enrollment.id}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        {},
-      );
+
+      const orderQueryParameters = {
+        enrollment_id: enrollment.id,
+        product_id: product.id,
+        state: NOT_CANCELED_ORDER_STATES,
+      };
+      const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+      fetchMock.get(url, {});
 
       render(
         <Wrapper client={createTestQueryClient({ user: true })}>
@@ -359,10 +380,13 @@ describe('PurchaseButton', () => {
       const enrollment = EnrollmentFactory().one();
       enrollment.course_run.state = CourseStateFactory(courseRunStateData).one();
 
-      fetchMock.get(
-        `https://joanie.endpoint/api/v1.0/orders/?enrollment_id=${enrollment.id}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        {},
-      );
+      const orderQueryParameters = {
+        enrollment_id: enrollment.id,
+        product_id: product.id,
+        state: NOT_CANCELED_ORDER_STATES,
+      };
+      const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+      fetchMock.get(url, {});
 
       render(
         <Wrapper client={createTestQueryClient({ user: true })}>
@@ -388,10 +412,14 @@ describe('PurchaseButton', () => {
   it('renders a disabled CTA if product has no target courses', async () => {
     const courseCode = '00000';
     const product = ProductFactory().one();
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-      {},
-    );
+
+    const orderQueryParameters = {
+      course_code: courseCode,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+    fetchMock.get(url, {});
     product.target_courses = [];
 
     render(
@@ -419,10 +447,14 @@ describe('PurchaseButton', () => {
   it('does not render CTA if disabled property is false', async () => {
     const courseCode = '00000';
     const product = ProductFactory().one();
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-      {},
-    );
+
+    const orderQueryParameters = {
+      course_code: courseCode,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+    fetchMock.get(url, {});
 
     render(
       <Wrapper client={createTestQueryClient({ user: true })}>

package/js/components/SaleTunnel/AddressSelector/index.spec.tsx

@@ -59,10 +59,11 @@ describe('AddressSelector', () => {
           setBillingAddress,
           setCreditCard: jest.fn(),
           onPaymentSuccess: jest.fn(),
-          step: SaleTunnelStep.PAYMENT,
+          step: SaleTunnelStep.IDLE,
           registerSubmitCallback: jest.fn(),
           unregisterSubmitCallback: jest.fn(),
           runSubmitCallbacks: jest.fn(),
+          nextStep: jest.fn(),
         }),
         [billingAddress],
       );

package/js/components/SaleTunnel/CertificateSaleTunnel/index.tsx

@@ -1,8 +1,8 @@
 import { SaleTunnelProps } from 'components/SaleTunnel/index';
 import { CertificateProduct } from 'types/Joanie';
 import { GenericSaleTunnel } from 'components/SaleTunnel/GenericSaleTunnel';
-import { GenericPaymentButton } from 'components/SaleTunnel/GenericPaymentButton';
 import { CertificateProductPath } from 'components/SaleTunnel/CertificateSaleTunnel/CertificateProductPath';
+import SubscriptionButton from 'components/SaleTunnel/SubscriptionButton';
 
 interface CertificateSaleTunnelProps extends Omit<SaleTunnelProps, 'product'> {
   product: CertificateProduct;
@@ -23,7 +23,7 @@ const CertificatePaymentButton = ({
   enrollment,
 }: Pick<CertificateSaleTunnelProps, 'enrollment'>) => {
   return (
-    <GenericPaymentButton
+    <SubscriptionButton
       buildOrderPayload={(payload) => {
         return {
           ...payload,

package/js/components/SaleTunnel/CredentialSaleTunnel/index.tsx

@@ -1,8 +1,8 @@
 import { CredentialProduct } from 'types/Joanie';
 import { GenericSaleTunnel } from 'components/SaleTunnel/GenericSaleTunnel';
 import { SaleTunnelProps } from 'components/SaleTunnel/index';
-import { GenericPaymentButton } from 'components/SaleTunnel/GenericPaymentButton';
 import { CredentialProductPath } from 'components/SaleTunnel/CredentialSaleTunnel/CredentialProductPath';
+import SubscriptionButton from 'components/SaleTunnel/SubscriptionButton';
 
 interface CredentialSaleTunnelProps extends Omit<SaleTunnelProps, 'product'> {
   product: CredentialProduct;
@@ -21,17 +21,13 @@ export const CredentialSaleTunnel = (props: CredentialSaleTunnelProps) => {
 
 const CredentialPaymentButton = ({
   course,
-  orderGroup,
 }: Pick<CredentialSaleTunnelProps, 'course' | 'orderGroup'>) => {
   return (
-    <GenericPaymentButton
-      buildOrderPayload={(payload) => {
-        return {
-          ...payload,
-          course_code: course!.code,
-          ...(orderGroup ? { order_group_id: orderGroup.id } : {}),
-        };
-      }}
+    <SubscriptionButton
+      buildOrderPayload={(payload) => ({
+        ...payload,
+        course_code: course!.code,
+      })}
     />
   );
 };