richie-education 2.28.2-dev39 → 2.28.2-dev58

package/js/components/ContractFrame/AbstractContractFrame.spec.tsx

@@ -4,6 +4,7 @@ import fetchMock from 'fetch-mock';
 import { render, screen, waitFor, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { PropsWithChildren } from 'react';
+import { CunninghamProvider } from '@openfun/cunningham-react';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
@@ -33,11 +34,13 @@ jest.mock('settings', () => ({
 describe('<AbstractContractFrame />', () => {
   const Wrapper = ({ children }: PropsWithChildren) => {
     return (
-      <QueryClientProvider client={createTestQueryClient({ user: true })}>
-        <IntlProvider locale="en">
-          <JoanieSessionProvider>{children}</JoanieSessionProvider>
-        </IntlProvider>
-      </QueryClientProvider>
+      <CunninghamProvider>
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <IntlProvider locale="en">
+            <JoanieSessionProvider>{children}</JoanieSessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>
+      </CunninghamProvider>
     );
   };
 
@@ -78,7 +81,7 @@ describe('<AbstractContractFrame />', () => {
     expect(await screen.findByTestId('dashboard-contract-frame')).toBeInTheDocument();
 
     const user = userEvent.setup();
-    await user.click(screen.getByRole('button', { name: 'Close dialog' }));
+    await user.click(screen.getByRole('button', { name: 'close' }));
     expect(mockOnClose).toHaveBeenCalled();
   });
 
@@ -115,6 +118,7 @@ describe('<AbstractContractFrame />', () => {
     const mockCheckSignature = jest.fn(async () => checkSignatureDeferred.promise);
     const mockOnDone = jest.fn();
     const mockOnClose = jest.fn();
+    fetchMock.post('https://joanie.endpoint/api/v1.0/signature/notifications/', 200);
 
     await act(async () => {
       render(
@@ -176,6 +180,7 @@ describe('<AbstractContractFrame />', () => {
     const mockCheckSignature = jest.fn(async () => checkSignatureDeferred.promise);
     const mockOnDone = jest.fn();
     const mockOnClose = jest.fn();
+    fetchMock.post('https://joanie.endpoint/api/v1.0/signature/notifications/', 200);
 
     await act(async () => {
       render(
@@ -222,7 +227,7 @@ describe('<AbstractContractFrame />', () => {
     // have been called
     await expectBannerError('An error happened while verifying signature. Please come back later.');
     expect(mockOnDone).not.toHaveBeenCalled();
-    button = screen.getByRole('button', { name: 'Close dialog' });
+    button = screen.getByRole('button', { name: 'close' });
     await user.click(button);
 
     expect(mockOnClose).toHaveBeenCalledTimes(1);
@@ -237,6 +242,7 @@ describe('<AbstractContractFrame />', () => {
     const mockCheckSignature = jest.fn(async () => checkSignatureDeferred.promise);
     const mockOnDone = jest.fn();
     const mockOnClose = jest.fn();
+    fetchMock.post('https://joanie.endpoint/api/v1.0/signature/notifications/', 200);
 
     await act(async () => {
       render(
@@ -285,7 +291,7 @@ describe('<AbstractContractFrame />', () => {
       'The signature is taking more time than expected ... please come back later.',
     );
     expect(mockOnDone).not.toHaveBeenCalled();
-    button = screen.getByRole('button', { name: 'Close dialog' });
+    button = screen.getByRole('button', { name: 'close' });
     await user.click(button);
 
     expect(mockOnClose).toHaveBeenCalledTimes(1);
@@ -300,6 +306,7 @@ describe('<AbstractContractFrame />', () => {
     const mockCheckSignature = jest.fn(async () => checkSignatureDeferred.promise);
     const mockOnDone = jest.fn();
     const mockOnClose = jest.fn();
+    fetchMock.post('https://joanie.endpoint/api/v1.0/signature/notifications/', 200);
 
     await act(async () => {
       render(
@@ -323,7 +330,7 @@ describe('<AbstractContractFrame />', () => {
     );
 
     // Dummy signature interface should have been rendered
-    const button = screen.getByRole('button', { name: 'Close dialog' });
+    const button = screen.getByRole('button', { name: 'close' });
     await user.click(button);
 
     expect(mockOnClose).toHaveBeenCalledTimes(1);

package/js/components/ContractFrame/AbstractContractFrame.tsx

@@ -1,11 +1,11 @@
 import React, { lazy, Suspense, useEffect, useRef, useState } from 'react';
-import { Button, Loader } from '@openfun/cunningham-react';
+import { Button, Loader, Modal, ModalSize } from '@openfun/cunningham-react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { Modal } from 'components/Modal';
 import { Maybe } from 'types/utils';
 import { CONTRACT_SETTINGS } from 'settings';
 import Banner, { BannerType } from 'components/Banner';
 import { SuccessIcon } from 'components/SuccessIcon';
+import { noop } from 'utils';
 
 /*
   /!\ This component should not be used directly, only its implementations should be.
@@ -63,7 +63,7 @@ export const messages = defineMessages({
   },
   finishedDescription: {
     defaultMessage:
-      'You will receive an email once your contract will be fully signed. You can now enroll in your course runs!',
+      'You will receive an email once your contract will be fully signed. You can now finalize your subscription.',
     description: 'Message displayed inside the contract signin modal when the contract is signed.',
     id: 'components.DashboardItem.Order.ContractFrame.finishedDescription',
   },
@@ -109,15 +109,16 @@ export interface SignatureProps {
   invitationLink: string;
 }
 
-const AbstractContractFrame = ({ isOpen, ...props }: Props) => {
+const AbstractContractFrame = ({ isOpen, onClose = noop, ...props }: Props) => {
   return (
     <Modal
       isOpen={isOpen}
-      shouldCloseOnOverlayClick={false}
-      shouldCloseOnEsc={false}
-      onRequestClose={props.onClose}
+      closeOnClickOutside={false}
+      closeOnEsc={false}
+      onClose={onClose}
+      size={ModalSize.LARGE}
     >
-      <ContractFrameContent {...props} />
+      <ContractFrameContent {...props} onClose={onClose} />
     </Modal>
   );
 };
@@ -156,7 +157,8 @@ const ContractFrameContent = ({
     try {
       const link = await getInvitationLink();
       startStepSign(link);
-    } catch (e) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (_error) {
       setErrored(intl.formatMessage(messages.errorSubmitForSignature));
     }
   };
@@ -200,7 +202,8 @@ const ContractFrameContent = ({
             round++;
             timeoutRef.current = setTimeout(poll, CONTRACT_SETTINGS.pollInterval);
           }
-        } catch (e) {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (_error) {
           setErrored(intl.formatMessage(messages.errorPolling));
         }
       }
@@ -220,11 +223,13 @@ const ContractFrameContent = ({
 
   const renderLoadingContract = () => {
     return (
-      <div className="ContractFrame__loading-container">
+      <div className="ContractFrame__container">
         <h3 className="ContractFrame__caption">
           <FormattedMessage {...messages.loadingContract} />
         </h3>
-        <Loader />
+        <div className="ContractFrame__footer">
+          <Loader />
+        </div>
       </div>
     );
   };
@@ -256,20 +261,20 @@ const ContractFrameContent = ({
         </Suspense>
       )}
       {step === ContractSteps.POLLING && (
-        <div className="ContractFrame__loading-container">
-          <div>
-            <h3 className="ContractFrame__caption">
-              <FormattedMessage {...messages.polling} />
-            </h3>
-            <p className="ContractFrame__content">
-              <FormattedMessage {...messages.pollingDescription} />
-            </p>
+        <div className="ContractFrame__container">
+          <h3 className="ContractFrame__caption">
+            <FormattedMessage {...messages.polling} />
+          </h3>
+          <p className="ContractFrame__content">
+            <FormattedMessage {...messages.pollingDescription} />
+          </p>
+          <div className="ContractFrame__footer">
+            <Loader />
           </div>
-          <Loader />
         </div>
       )}
       {step === ContractSteps.FINISHED && (
-        <div className="ContractFrame__finished">
+        <div className="ContractFrame__container">
           <SuccessIcon />
           <h3 className="ContractFrame__caption">
             <FormattedMessage {...messages.finishedCaption} />
@@ -277,9 +282,11 @@ const ContractFrameContent = ({
           <p className="ContractFrame__content">
             <FormattedMessage {...messages.finishedDescription} />
           </p>
-          <Button onClick={onClose}>
-            <FormattedMessage {...messages.finishedButton} />
-          </Button>
+          <div className="ContractFrame__footer">
+            <Button onClick={onClose}>
+              <FormattedMessage {...messages.finishedButton} />
+            </Button>
+          </div>
         </div>
       )}
     </div>

package/js/components/ContractFrame/LearnerContractFrame.tsx

@@ -1,12 +1,12 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { CredentialOrder, NestedCredentialOrder } from 'types/Joanie';
+import { Order, AbstractNestedOrder } from 'types/Joanie';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 import AbstractContractFrame, {
   AbstractProps,
 } from 'components/ContractFrame/AbstractContractFrame';
 
 interface Props extends AbstractProps {
-  order: CredentialOrder | NestedCredentialOrder;
+  order: Order | AbstractNestedOrder;
 }
 
 const LearnerContractFrame = ({ order, onDone, ...props }: Props) => {

package/js/components/ContractFrame/_styles.scss

@@ -17,15 +17,13 @@ iframe#lex-persona {
 
 .ContractFrame {
   &__modal-body {
-    padding: 0 3rem 1.5rem 3rem;
+    padding: 1.5rem 3rem;
   }
 
-  &__loading-container {
+  &__container {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 3rem 0;
-    gap: 4rem;
   }
 
   &__caption {
@@ -33,16 +31,6 @@ iframe#lex-persona {
     font-size: 1.5rem;
   }
 
-  &__finished {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    button {
-      margin-top: 2.5rem;
-    }
-  }
-
   &__content {
     color: r-theme-val(contract-frame, content-color);
     font-size: 0.875rem;
@@ -59,4 +47,8 @@ iframe#lex-persona {
     align-items: center;
     gap: 2rem;
   }
+
+  &__footer {
+    margin-top: 2.5rem;
+  }
 }

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

@@ -53,11 +53,11 @@ describe('CreditCardSelector', () => {
     render(<Wrapper />);
 
     // During loading state, the spinner should be displayed and the current selected card should not be displayed.
-    expect(screen.queryByText('Add new credit card during payment')).not.toBeInTheDocument();
+    expect(screen.queryByText('Use another credit card')).not.toBeInTheDocument();
     await expectSpinner();
     await expectNoSpinner();
 
-    screen.getByText('Use another credit card during payment');
+    screen.getByText('Use another credit card');
 
     // As the user has no credit card, the edit button should not be displayed.
     expect(
@@ -206,7 +206,7 @@ describe('CreditCardSelector', () => {
     await user.click(editButton);
 
     const radio = screen.getByRole('radio', {
-      name: /Use another credit card during payment/i,
+      name: /Use another credit card/i,
     });
     await user.click(radio);
 
@@ -216,7 +216,7 @@ describe('CreditCardSelector', () => {
     await user.click(submitButton);
 
     expect(screen.queryByTestId('credit-card-selector-modal')).not.toBeInTheDocument();
-    screen.getByText('Use another credit card during payment');
+    screen.getByText('Use another credit card');
     expect(contextRef.current.creditCard).toBeUndefined();
   });
 
@@ -244,15 +244,15 @@ describe('CreditCardSelector', () => {
     await screen.findByTestId('credit-card-' + mainCreditCard.id);
     screen.getByText(mainCreditCard.title!);
     screen.getByText('Ends with •••• ' + mainCreditCard.last_numbers);
-    expect(screen.queryByText('Add new credit card during payment')).not.toBeInTheDocument();
     expect(contextRef.current.creditCard!.id).toEqual(mainCreditCard.id);
 
     const user = userEvent.setup();
-    const button = screen.getByRole('button', { name: /use another credit card during payment/i });
+    const button = screen.getByRole('button', { name: /use another credit card/i });
     await user.click(button);
 
     expect(screen.queryByTestId('credit-card-selector-modal')).not.toBeInTheDocument();
-    screen.getByText('Use another credit card during payment');
+    screen.getByText('Use another credit card');
+    expect(button).not.toBeInTheDocument();
     expect(contextRef.current.creditCard).toBeUndefined();
   });
 

package/js/components/CreditCardSelector/index.tsx

@@ -35,7 +35,7 @@ const messages = defineMessages({
   creditCardEmptyInlineDescription: {
     id: 'components.SaleTunnel.CreditCardSelector.creditCardEmptyInlineDescription',
     description: 'Description for the empty credit card inline',
-    defaultMessage: 'Use another credit card during payment',
+    defaultMessage: 'Use another credit card',
   },
   modalTitle: {
     id: 'components.SaleTunnel.CreditCardSelector.modalTitle',
@@ -122,7 +122,7 @@ export const CreditCardSelector = ({
             <Button
               onClick={() => setCreditCard(undefined)}
               size="small"
-              color="tertiary"
+              color="secondary"
               className="mt-t"
               fullWidth={isMobile}
             >

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

@@ -5,8 +5,8 @@ import userEvent from '@testing-library/user-event';
 import { QueryClientProvider } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
 import { faker } from '@faker-js/faker';
-import { ContractFactory, CredentialOrderFactory } from 'utils/test/factories/joanie';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { ContractFactory, CredentialOrderFactory } from 'utils/test/factories/joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieApiProvider from 'contexts/JoanieApiContext';
 import { alert } from 'utils/indirection/window';

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;
       }