richie-education 3.2.2-dev27 → 3.2.2-dev36

package/jest.config.js

@@ -15,7 +15,17 @@ module.exports = {
   },
   resolver: '<rootDir>/jest/resolver.js',
   transformIgnorePatterns: [
-    'node_modules/(?!(react-intl|lodash-es|@hookform/resolvers|query-string|decode-uri-component|split-on-first|filter-obj|@openfun/cunningham-react)/)',
+    'node_modules/(?!(' +
+      'react-intl' +
+      '|lodash-es' +
+      '|@hookform/resolvers' +
+      '|query-string' +
+      '|decode-uri-component' +
+      '|split-on-first' +
+      '|filter-obj' +
+      '|@openfun/cunningham-react' +
+      '|keycloak-js' +
+      ')/)',
   ],
   globals: {
     RICHIE_VERSION: 'test',

package/js/api/auth/keycloak.spec.ts

@@ -0,0 +1,126 @@
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import API from './keycloak';
+
+const mockKeycloakInit = jest.fn().mockResolvedValue(true);
+const mockKeycloakLogout = jest.fn().mockResolvedValue(undefined);
+const mockKeycloakLogin = jest.fn().mockResolvedValue(undefined);
+const mockKeycloakLoadUserProfile = jest.fn();
+
+jest.mock('keycloak-js', () => {
+  return jest.fn().mockImplementation(() => ({
+    init: mockKeycloakInit,
+    logout: mockKeycloakLogout,
+    login: mockKeycloakLogin,
+    loadUserProfile: mockKeycloakLoadUserProfile,
+  }));
+});
+
+jest.mock('utils/indirection/window', () => ({
+  location: {
+    origin: 'https://richie.test',
+    pathname: '/courses/test-course/',
+  },
+}));
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: {
+      backend: 'keycloak',
+      endpoint: 'https://keycloak.test/auth',
+      client_id: 'richie-client',
+      realm: 'richie-realm',
+      auth_url: 'https://keycloak.test/auth/realms/richie-realm/protocol/openid-connect/auth',
+    },
+  }).one(),
+}));
+
+describe('Keycloak API', () => {
+  const authConfig = {
+    backend: 'keycloak',
+    endpoint: 'https://keycloak.test/auth',
+    client_id: 'richie-client',
+    realm: 'richie-realm',
+    auth_url: 'https://keycloak.test/auth/realms/richie-realm/protocol/openid-connect/auth',
+    registration_url:
+      'https://keycloak.test/auth/realms/richie-realm/protocol/openid-connect/registrations',
+  };
+
+  let keycloakApi: ReturnType<typeof API>;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    keycloakApi = API(authConfig);
+  });
+
+  describe('user.me', () => {
+    it('returns null when loadUserProfile fails', async () => {
+      mockKeycloakLoadUserProfile.mockRejectedValueOnce(new Error('Not authenticated'));
+      const response = await keycloakApi.user.me();
+      expect(response).toBeNull();
+    });
+
+    it('returns user when loadUserProfile succeeds', async () => {
+      mockKeycloakLoadUserProfile.mockResolvedValueOnce({
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'johndoe@example.com',
+      });
+
+      const response = await keycloakApi.user.me();
+      expect(response).toEqual({
+        username: 'John Doe',
+        email: 'johndoe@example.com',
+      });
+    });
+  });
+
+  describe('user.login', () => {
+    it('calls keycloak.login with correct redirect URI', async () => {
+      await keycloakApi.user.login();
+
+      expect(mockKeycloakLogin).toHaveBeenCalledWith({
+        redirectUri: 'https://richie.test/courses/test-course/',
+      });
+    });
+  });
+
+  describe('user.register', () => {
+    it('calls keycloak.login with register action', async () => {
+      await keycloakApi.user.register();
+
+      expect(mockKeycloakLogin).toHaveBeenCalledWith({
+        redirectUri: 'https://richie.test/courses/test-course/',
+        action: 'REGISTER',
+      });
+    });
+  });
+
+  describe('user.logout', () => {
+    it('calls keycloak.logout with correct redirect URI', async () => {
+      await keycloakApi.user.logout();
+
+      expect(mockKeycloakLogout).toHaveBeenCalledWith({
+        redirectUri: 'https://richie.test/courses/test-course/',
+      });
+    });
+  });
+
+  describe('Keycloak initialization', () => {
+    it('initializes keycloak with correct configuration', () => {
+      const Keycloak = require('keycloak-js');
+
+      expect(Keycloak).toHaveBeenCalledWith({
+        url: 'https://keycloak.test/auth',
+        realm: 'richie-realm',
+        clientId: 'richie-client',
+      });
+
+      expect(mockKeycloakInit).toHaveBeenCalledWith({
+        checkLoginIframe: false,
+        flow: 'implicit',
+        token: undefined,
+      });
+    });
+  });
+});

package/js/api/auth/keycloak.ts

@@ -0,0 +1,55 @@
+import Keycloak from 'keycloak-js';
+import { AuthenticationBackend } from 'types/commonDataProps';
+import { APIAuthentication } from 'types/api';
+import { location } from 'utils/indirection/window';
+import { handle } from 'utils/errors/handle';
+
+const API = (APIConf: AuthenticationBackend): { user: APIAuthentication } => {
+  const keycloak = new Keycloak({
+    url: APIConf.endpoint,
+    realm: APIConf.realm!,
+    clientId: APIConf.client_id!,
+  });
+  keycloak.init({
+    checkLoginIframe: false,
+    flow: 'implicit',
+    token: APIConf.token!,
+  });
+
+  const getRedirectUri = () => {
+    return `${location.origin}${location.pathname}`;
+  };
+
+  return {
+    user: {
+      me: async () => {
+        return keycloak
+          .loadUserProfile()
+          .then((userProfile) => {
+            return {
+              username: `${userProfile.firstName} ${userProfile.lastName}`,
+              email: userProfile.email,
+            };
+          })
+          .catch((error) => {
+            handle(error);
+            return null;
+          });
+      },
+
+      login: async () => {
+        await keycloak.login({ redirectUri: getRedirectUri() });
+      },
+
+      register: async () => {
+        await keycloak.login({ redirectUri: getRedirectUri(), action: 'REGISTER' });
+      },
+
+      logout: async () => {
+        await keycloak.logout({ redirectUri: getRedirectUri() });
+      },
+    },
+  };
+};
+
+export default API;

package/js/api/authentication.ts

@@ -11,6 +11,7 @@ import { Nullable } from 'types/utils';
 import context from 'utils/context';
 import { APIAuthentication, APIBackend } from 'types/api';
 import DummyApiInterface from './lms/dummy';
+import KeycloakApiInterface from './auth/keycloak';
 import OpenEdxDogwoodApiInterface from './lms/openedx-dogwood';
 import OpenEdxHawthornApiInterface from './lms/openedx-hawthorn';
 import OpenEdxFonzieApiInterface from './lms/openedx-fonzie';
@@ -22,6 +23,8 @@ const AuthenticationAPIHandler = (): Nullable<APIAuthentication> => {
   switch (AUTHENTICATION.backend) {
     case APIBackend.DUMMY:
       return DummyApiInterface(AUTHENTICATION).user;
+    case APIBackend.KEYCLOAK:
+      return KeycloakApiInterface(AUTHENTICATION).user;
     case APIBackend.OPENEDX_DOGWOOD:
       return OpenEdxDogwoodApiInterface(AUTHENTICATION).user;
     case APIBackend.OPENEDX_HAWTHORN:

package/js/components/PaymentInterfaces/types.ts

@@ -10,6 +10,7 @@ export enum SubscriptionErrorMessageId {
   ERROR_FULL_PRODUCT = 'errorFullProduct',
   ERROR_WITHDRAWAL_RIGHT = 'errorWithdrawalRight',
   ERROR_BATCH_ORDER_FORM_INVALID = 'batchOrderFormInvalid',
+  ERROR_BATCH_ORDER_MAX_ORDERS = 'errorBatchOrderMaxOrders',
 }
 
 export enum PaymentProviders {

package/js/components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationGroup.tsx

@@ -86,6 +86,8 @@ export const SaleTunnelInformationGroup = () => {
   );
 };
 
+const EMAIL_REGEX = /^[\w.-]+@([\w-]+\.)+[\w-]{2,4}$/;
+
 export const validationSchema = Yup.object().shape({
   offering_id: Yup.string().required(),
   company_name: Yup.string().required(),
@@ -98,23 +100,25 @@ export const validationSchema = Yup.object().shape({
   administrative_lastname: Yup.string().required(),
   administrative_firstname: Yup.string().required(),
   administrative_profession: Yup.string().required(),
-  administrative_email: Yup.string().email().required(),
+  administrative_email: Yup.string().matches(EMAIL_REGEX).required(),
   administrative_telephone: Yup.string().required(),
   signatory_lastname: Yup.string().required(),
   signatory_firstname: Yup.string().required(),
   signatory_profession: Yup.string().required(),
-  signatory_email: Yup.string().email().required(),
+  signatory_email: Yup.string().matches(EMAIL_REGEX).required(),
   signatory_telephone: Yup.string().required(),
-  billing_address: Yup.object().optional().shape({
-    company_name: Yup.string().optional(),
-    identification_number: Yup.string().optional(),
-    contact_name: Yup.string().optional(),
-    contact_email: Yup.string().email().optional(),
-    address: Yup.string().optional(),
-    postcode: Yup.string().optional(),
-    city: Yup.string().optional(),
-    country: Yup.string().optional(),
-  }),
+  billing_address: Yup.object()
+    .optional()
+    .shape({
+      company_name: Yup.string().optional(),
+      identification_number: Yup.string().optional(),
+      contact_name: Yup.string().optional(),
+      contact_email: Yup.string().matches(EMAIL_REGEX).optional(),
+      address: Yup.string().optional(),
+      postcode: Yup.string().optional(),
+      city: Yup.string().optional(),
+      country: Yup.string().optional(),
+    }),
   nb_seats: Yup.number().required().min(1),
   payment_method: Yup.mixed<PaymentMethod>().oneOf(Object.values(PaymentMethod)).required(),
   funding_entity: Yup.string().optional(),
@@ -198,9 +202,29 @@ const BatchOrderForm = () => {
   }, [values, batchOrder, setBatchOrder]);
 
   useEffect(() => {
-    const requiredRules = requiredFieldsByStep[activeStep];
-    const isStepValid = requiredRules.every((field) => !!batchOrder?.[field]);
-    setIsCurrentStepValid(isStepValid);
+    const validateStep = async () => {
+      if (activeStep === 0 && batchOrder?.billing_address?.contact_email) {
+        const isEmailValid = EMAIL_REGEX.test(batchOrder.billing_address.contact_email);
+        if (!isEmailValid) {
+          setIsCurrentStepValid(false);
+          return;
+        }
+      }
+      const fieldsToValidate = requiredFieldsByStep[activeStep];
+      const validationPromises = fieldsToValidate.map(async (field) => {
+        try {
+          const fieldSchema = Yup.reach(validationSchema, field) as Yup.Schema;
+          await fieldSchema.validate(batchOrder?.[field]);
+          return true;
+        } catch {
+          return false;
+        }
+      });
+      const results = await Promise.all(validationPromises);
+      const isStepValid = results.every((isValid) => isValid);
+      setIsCurrentStepValid(isStepValid);
+    };
+    validateStep();
   }, [activeStep, batchOrder]);
 
   return (

package/js/components/SaleTunnel/SaleTunnelInformation/StepContent.tsx

@@ -208,7 +208,7 @@ export const StepContent = ({
   const { items: organizations } = useOfferingOrganizations({ id: offering?.id });
   const orgOptions = organizations.map((organization) => ({
     label: organization.title,
-    value: organization.code,
+    value: organization.id,
   }));
   const [otherBillingAddress, setOtherBillingAddress] = useState(false);
 
@@ -275,7 +275,19 @@ export const StepContent = ({
         />
         <Checkbox
           label={intl.formatMessage(messages.checkBilling)}
-          onChange={() => setOtherBillingAddress(!otherBillingAddress)}
+          onChange={() => {
+            setOtherBillingAddress(!otherBillingAddress);
+            form.resetField('billing_address');
+            form.resetField('billing_address.contact_name');
+            form.resetField('billing_address.contact_email');
+            form.resetField('billing_address.company_name');
+            form.resetField('billing_address.identification_number');
+            form.resetField('billing_address.address');
+            form.resetField('billing_address.postcode');
+            form.resetField('billing_address.city');
+            form.resetField('billing_address.country');
+            form.clearErrors();
+          }}
           checked={otherBillingAddress}
         />
       </div>
@@ -291,6 +303,13 @@ export const StepContent = ({
             className="field"
             {...register('billing_address.contact_email')}
             label={intl.formatMessage(messages.contactEmail)}
+            state={formState.errors.billing_address?.contact_email?.message ? 'error' : 'default'}
+            text={
+              getLocalizedCunninghamErrorProp(
+                intl,
+                formState.errors.billing_address?.contact_email?.message,
+              ).text
+            }
           />
           <Input
             className="field"
@@ -497,21 +516,11 @@ export const StepContent = ({
           <Input
             {...register('funding_entity')}
             label={intl.formatMessage(messages.fundingEntityName)}
-            required
-            state={formState.errors.funding_entity?.message ? 'error' : 'default'}
-            text={
-              getLocalizedCunninghamErrorProp(intl, formState.errors.funding_entity?.message).text
-            }
           />
           <Input
             {...register('funding_amount')}
             type="number"
             label={intl.formatMessage(messages.fundingEntityAmount)}
-            required
-            state={formState.errors.funding_amount?.message ? 'error' : 'default'}
-            text={
-              getLocalizedCunninghamErrorProp(intl, formState.errors.funding_amount?.message).text
-            }
           />
         </div>
         <FormattedMessage {...messages.recommandation} />

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

@@ -67,6 +67,13 @@ const messages = defineMessages({
     defaultMessage: 'Some required fields are missing in the form.',
     description: 'Some required fields are missing in the form.',
   },
+  errorBatchOrderMaxOrders: {
+    id: 'components.SubscriptionButton.errorBatchOrderMaxOrders',
+    defaultMessage:
+      'Unable to create the order: the maximum number of available seats for this offering has been reached. Please contact support for more information.',
+    description:
+      'Error message shown when batch order creation fails because maximum number of orders is reached by an active offering rule.',
+  },
 });
 
 enum ComponentStates {
@@ -172,7 +179,11 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
       return;
     }
     batchOrderMethods.create(batchOrder, {
-      onError: async () => {
+      onError: async (createBatchOrderError: HttpError) => {
+        if (createBatchOrderError.code === 422) {
+          handleError(SubscriptionErrorMessageId.ERROR_BATCH_ORDER_MAX_ORDERS);
+          return;
+        }
         handleError();
       },
       onSuccess: async (createdBatchOrder: any) => {

package/js/components/SaleTunnel/index.full-process-b2b.spec.tsx

@@ -353,4 +353,158 @@ describe('SaleTunnel', () => {
 
     screen.getByText('Subscription confirmed!');
   }, 10000);
+
+  it('should display the appropriate error message when there are not enough seats available', async () => {
+    const course = PacedCourseFactory().one();
+    const product = ProductFactory().one();
+    const offering = OfferingFactory({ course, product, is_withdrawable: false }).one();
+    const paymentPlan = PaymentPlanFactory().one();
+    const offeringOrganization = OfferingBatchOrderFactory({
+      product: { id: product.id, title: product.title },
+    }).one();
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/`,
+      offering,
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+      paymentPlan,
+    );
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/enrollments/`, []);
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify({
+        product_id: product.id,
+        course_code: course.code,
+        state: NOT_CANCELED_ORDER_STATES,
+      })}`,
+      [],
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/offerings/${offering.id}/get-organizations/`,
+      offeringOrganization,
+    );
+
+    render(<CourseProductItem productId={product.id} course={course} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    // Verify product info
+    await screen.findByRole('heading', { level: 3, name: product.title });
+    await screen.findByText(formatPrice(product.price_currency, product.price));
+    expect(screen.queryByText('Purchased')).not.toBeInTheDocument();
+
+    const user = userEvent.setup();
+    const buyButton = screen.getByRole('button', { name: product.call_to_action });
+
+    expect(screen.queryByTestId('generic-sale-tunnel-payment-step')).not.toBeInTheDocument();
+    await user.click(buyButton);
+    await screen.findByTestId('generic-sale-tunnel-payment-step');
+
+    // Verify learning path
+    await screen.findByText('Your learning path');
+    const targetCourses = await screen.findAllByTestId('product-target-course');
+    expect(targetCourses).toHaveLength(product.target_courses.length);
+    targetCourses.forEach((targetCourse, index) => {
+      const courseItem = product.target_courses[index];
+      const courseDetail = within(targetCourse).getByTestId(
+        `target-course-detail-${courseItem.code}`,
+      );
+      const summary = courseDetail.querySelector('summary')!;
+      expect(summary).toHaveTextContent(courseItem.title);
+
+      const courseRuns = targetCourse.querySelectorAll(
+        '.product-detail-row__course-run-dates__item',
+      );
+      const openedCourseRuns = courseItem.course_runs.filter(
+        (cr: CourseRun) => cr.state.priority <= Priority.FUTURE_NOT_YET_OPEN,
+      );
+      expect(courseRuns).toHaveLength(openedCourseRuns.length);
+    });
+
+    // Select group buy form
+    await screen.findByText('Purchase type');
+    const formTypeSelect = screen.getByRole('combobox', { name: 'Purchase type' });
+    const menu: HTMLDivElement = screen.getByRole('listbox', { name: 'Purchase type' });
+    expectMenuToBeClosed(menu);
+    await user.click(formTypeSelect);
+    expectMenuToBeOpen(menu);
+    await user.click(screen.getByText('Group purchase (B2B)'));
+
+    // Company step
+    const $companyName = await screen.findByRole('textbox', { name: 'Company name' });
+    const $idNumber = screen.getByRole('textbox', { name: /Identification number/ });
+    const $address = screen.getByRole('textbox', { name: 'Address' });
+    const $postCode = screen.getByRole('textbox', { name: 'Post code' });
+    const $city = screen.getByRole('textbox', { name: 'City' });
+    const $country = screen.getByRole('combobox', { name: 'Country' });
+
+    await user.type($companyName, 'GIP-FUN');
+    await user.type($idNumber, '789 242 229 01694');
+    await user.type($address, '61 Bis Rue de la Glaciere');
+    await user.type($postCode, '75013');
+    await user.type($city, 'Paris');
+
+    const countryMenu: HTMLDivElement = screen.getByRole('listbox', { name: 'Country' });
+    await user.click($country);
+    expectMenuToBeOpen(countryMenu);
+    await user.click(screen.getByText('France'));
+
+    expect($companyName).toHaveValue('GIP-FUN');
+    const visibleValue = $country.querySelector('.c__select__inner__value span');
+    expect(visibleValue!.textContent).toBe('France');
+
+    // Follow-up step
+    await user.click(screen.getByRole('button', { name: 'Next' }));
+    const $lastName = await screen.findByRole('textbox', { name: 'Last name' });
+    const $firstName = screen.getByRole('textbox', { name: 'First name' });
+    const $role = screen.getByRole('textbox', { name: 'Role' });
+    const $email = screen.getByRole('textbox', { name: 'Email' });
+    const $phone = screen.getByRole('textbox', { name: 'Phone' });
+
+    await user.type($lastName, 'Doe');
+    await user.type($firstName, 'John');
+    await user.type($role, 'HR');
+    await user.type($email, 'john.doe@fun-mooc.com');
+    await user.type($phone, '+338203920103');
+
+    expect($lastName).toHaveValue('Doe');
+    expect($email).toHaveValue('john.doe@fun-mooc.com');
+
+    // Signatory step
+    await user.click(screen.getByRole('button', { name: 'Next' }));
+    const $signatoryLastName = await screen.findByRole('textbox', { name: 'Last name' });
+    const $signatoryFirstName = screen.getByRole('textbox', { name: 'First name' });
+    const $signatoryRole = screen.getByRole('textbox', { name: 'Role' });
+    const $signatoryEmail = screen.getByRole('textbox', { name: 'Email' });
+    const $signatoryPhone = screen.getByRole('textbox', { name: 'Phone' });
+
+    await user.type($signatoryLastName, 'Doe');
+    await user.type($signatoryFirstName, 'John');
+    await user.type($signatoryRole, 'CEO');
+    await user.type($signatoryEmail, 'john.doe@fun-mooc.com');
+    await user.type($signatoryPhone, '+338203920103');
+
+    // Participants step
+    await user.click(screen.getByRole('button', { name: 'Next' }));
+    const $nbParticipants = await screen.findByLabelText('How many participants ?');
+    await user.type($nbParticipants, '13');
+    expect($nbParticipants).toHaveValue(13);
+
+    fetchMock.post('https://joanie.endpoint/api/v1.0/batch-orders/', {
+      status: 422,
+      body: {
+        __all__: ['Maximum number of orders reached for product Credential Product'],
+      },
+    });
+
+    const $subscribeButton = screen.getByRole('button', {
+      name: `Subscribe`,
+    }) as HTMLButtonElement;
+    await user.click($subscribeButton);
+
+    await screen.findByText(
+      'Unable to create the order: the maximum number of available seats for this offering has been reached. Please contact support for more information.',
+    );
+  }, 30000);
 });

package/js/pages/TeacherDashboardOrganizationQuotes/index.full-process.spec.tsx

@@ -2,7 +2,7 @@ import fetchMock from 'fetch-mock';
 import { cleanup, screen } from '@testing-library/react';
 import userEvent, { UserEvent } from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { OrganizationQuoteFactory } from 'utils/test/factories/joanie';
+import { OrganizationFactory, OrganizationQuoteFactory } from 'utils/test/factories/joanie';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { render } from 'utils/test/render';
@@ -35,6 +35,17 @@ describe('full process for the organization quotes dashboard', () => {
   it('should works with the full process workflow for any payment methods', async () => {
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
 
+    const organization = OrganizationFactory({
+      abilities: {
+        can_submit_for_signature_batch_order: true,
+        confirm_bank_transfer: true,
+        confirm_quote: true,
+        download_quote: true,
+        sign_contracts: true,
+      },
+    }).one();
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/1/', organization);
+
     const quoteQuoted = OrganizationQuoteFactory({
       batch_order: {
         state: BatchOrderState.QUOTED,
@@ -129,7 +140,6 @@ describe('full process for the organization quotes dashboard', () => {
     await user.click(toggle);
     expect(card).toHaveClass('dashboard-card--opened');
 
-    // Download quote
     const downloadQuoteButton = await screen.findByRole('button', {
       name: /Download quote/i,
     });
@@ -147,7 +157,7 @@ describe('full process for the organization quotes dashboard', () => {
 
     // Second step : to sign quote
     const sendForSignatureButton = await screen.findByRole('button', {
-      name: /send quote for signature/i,
+      name: /send contract for signature/i,
     });
     expect(sendForSignatureButton).toBeVisible();
     await user.click(sendForSignatureButton);

package/js/pages/TeacherDashboardOrganizationQuotes/index.spec.tsx

@@ -2,11 +2,12 @@ import fetchMock from 'fetch-mock';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent, { UserEvent } from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { OrganizationQuoteFactory } from 'utils/test/factories/joanie';
+import { OrganizationFactory, OrganizationQuoteFactory } from 'utils/test/factories/joanie';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { render } from 'utils/test/render';
 import { expectBannerInfo, expectBannerError } from 'utils/test/expectBanner';
+import { BatchOrderState } from 'types/Joanie';
 import TeacherDashboardOrganizationQuotes from '.';
 
 let user: UserEvent;
@@ -29,6 +30,9 @@ describe('pages/TeacherDashboardOrganizationQuotes', () => {
   it('should render a list of quotes for an organization', async () => {
     const quoteList = OrganizationQuoteFactory().many(1);
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
+
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/1/', []);
+
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/1/quotes/?page=1&page_size=10`, {
       results: quoteList,
       count: 0,
@@ -59,6 +63,9 @@ describe('pages/TeacherDashboardOrganizationQuotes', () => {
 
   it('should render an empty list of quotes for an organization', async () => {
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
+
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/1/', []);
+
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/1/quotes/?page=1&page_size=10`, {
       results: [],
       count: 0,
@@ -81,6 +88,8 @@ describe('pages/TeacherDashboardOrganizationQuotes', () => {
     const quoteList = OrganizationQuoteFactory().many(30);
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
 
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/1/', []);
+
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/1/quotes/?page=1&page_size=10`, {
       results: quoteList.slice(0, 10),
       count: 30,
@@ -126,6 +135,9 @@ describe('pages/TeacherDashboardOrganizationQuotes', () => {
 
   it('should display an error when API fails', async () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', []);
+
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/1/', []);
+
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/organizations/1/quotes/?page=1&page_size=10',
       500,
@@ -141,4 +153,49 @@ describe('pages/TeacherDashboardOrganizationQuotes', () => {
     await expectNoSpinner();
     await expectBannerError('An error occurred while fetching resources. Please retry later.');
   });
+
+  it('should render disabled buttons when the user is not allowed', async () => {
+    const quoteQuoted = OrganizationQuoteFactory({
+      batch_order: {
+        state: BatchOrderState.QUOTED,
+        available_actions: { next_action: 'confirm_quote' },
+      },
+    }).one();
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
+
+    const organization = OrganizationFactory({
+      abilities: {
+        can_submit_for_signature_batch_order: false,
+        confirm_bank_transfer: false,
+        confirm_quote: false,
+        download_quote: true,
+        sign_contracts: false,
+      },
+    }).one();
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/1/', organization);
+
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/1/quotes/?page=1&page_size=10`, {
+      results: [quoteQuoted],
+      count: 1,
+      previous: null,
+      next: null,
+    });
+
+    render(<TeacherDashboardOrganizationQuotes />, {
+      routerOptions: {
+        path: '/organizations/:organizationId/quotes',
+        initialEntries: ['/organizations/1/quotes'],
+      },
+    });
+
+    await expectNoSpinner();
+
+    const downloadQuoteButton = await screen.findByRole('button', { name: /Download quote/i });
+    expect(downloadQuoteButton).toBeVisible();
+    expect(downloadQuoteButton).not.toBeDisabled();
+
+    const confirmQuoteButton = await screen.findByRole('button', { name: /Confirm quote/i });
+    expect(confirmQuoteButton).toBeVisible();
+    expect(confirmQuoteButton).toBeDisabled();
+  });
 });

package/js/pages/TeacherDashboardOrganizationQuotes/index.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useParams } from 'react-router';
 import Banner, { BannerType } from 'components/Banner';
 import { useOrganizationsQuotes } from 'hooks/useOrganizationQuotes';
+import { useOrganization } from 'hooks/useOrganizations';
 import { TeacherDashboardContractsParams } from 'pages/TeacherDashboardContractsLayout/hooks/useTeacherContractFilters';
 import { BatchOrderState, OrganizationQuote } from 'types/Joanie';
 import { PaymentMethod } from 'components/PaymentInterfaces/types';
@@ -71,9 +72,9 @@ const messages = defineMessages({
     description: 'Label for confirming a bank transfer',
   },
   sendForSignature: {
-    defaultMessage: 'Send quote for signature',
+    defaultMessage: 'Send contract for signature',
     id: 'components.OrganizationQuotesTable.sendForSignature',
-    description: 'Action label to send a quote for signature',
+    description: 'Action label to send a contract for signature',
   },
   waitingSignature: {
     defaultMessage: 'Waiting signature',
@@ -215,6 +216,13 @@ const messages = defineMessages({
 const TeacherDashboardOrganizationQuotes = () => {
   const intl = useIntl();
   const { organizationId: routeOrganizationId } = useParams<TeacherDashboardContractsParams>();
+  const {
+    item: organization,
+    states: { isPending: isOrganizationPending },
+  } = useOrganization(routeOrganizationId);
+
+  const abilities = organization?.abilities;
+
   const pagination = usePagination({ itemsPerPage: 10 });
 
   const {
@@ -249,7 +257,7 @@ const TeacherDashboardOrganizationQuotes = () => {
 
   if (error) return <Banner message={error} type={BannerType.ERROR} rounded />;
 
-  if (isPending)
+  if (isPending || isOrganizationPending)
     return (
       <Spinner size="large">
         <span id="loading-contract-data">
@@ -336,6 +344,7 @@ const TeacherDashboardOrganizationQuotes = () => {
           className="mr-2"
           onClick={() => handleDownloadQuote(quote.id)}
           icon={<span className="material-icons">download</span>}
+          disabled={!abilities?.download_quote}
         >
           {intl.formatMessage(messages.downloadQuote)}
         </Button>
@@ -343,6 +352,7 @@ const TeacherDashboardOrganizationQuotes = () => {
           size="small"
           onClick={() => handleOpenConfirm(quote.id)}
           icon={<span className="material-icons">check_circle</span>}
+          disabled={!abilities?.confirm_quote}
         >
           {intl.formatMessage(messages.confirmQuote)}
         </Button>
@@ -365,6 +375,7 @@ const TeacherDashboardOrganizationQuotes = () => {
         size="small"
         onClick={() => handleConfirmBankTransfer(quote.batch_order.id)}
         icon={<span className="material-icons">account_balance</span>}
+        disabled={!abilities?.confirm_bank_transfer}
       >
         {intl.formatMessage(messages.confirmBank)}
       </Button>
@@ -373,7 +384,7 @@ const TeacherDashboardOrganizationQuotes = () => {
     const submitForSignatureButton = (
       <Button
         size="small"
-        disabled={batchOrder.contract_submitted}
+        disabled={batchOrder.contract_submitted || !abilities?.can_submit_for_signature_batch_order}
         onClick={() =>
           !batchOrder.contract_submitted && handleSubmitForSignature(quote.batch_order.id)
         }

package/js/types/Joanie.ts

@@ -35,6 +35,18 @@ export interface Organization {
   contact_phone: Nullable<string>;
   dpo_email: Nullable<string>;
   address?: Address;
+  abilities: {
+    can_submit_for_signature_batch_order: boolean;
+    confirm_bank_transfer: boolean;
+    confirm_quote: boolean;
+    delete: boolean;
+    download_quote: boolean;
+    get: boolean;
+    manage_accesses: boolean;
+    patch: boolean;
+    put: boolean;
+    sign_contracts: boolean;
+  };
 }
 
 export interface OrganizationResourceQuery extends ResourcesQuery {

package/js/types/api.ts

@@ -60,6 +60,7 @@ export enum APIBackend {
   DUMMY = 'dummy',
   FONZIE = 'fonzie',
   JOANIE = 'joanie',
+  KEYCLOAK = 'keycloak',
   OPENEDX_DOGWOOD = 'openedx-dogwood',
   OPENEDX_HAWTHORN = 'openedx-hawthorn',
 }

package/js/types/commonDataProps.ts

@@ -14,6 +14,17 @@ export interface LMSBackend {
 export interface AuthenticationBackend {
   backend: string;
   endpoint: string;
+  client_id?: string;
+  realm?: string;
+  token?: string;
+  auth_url?: string;
+  registration_url?: string;
+  user_info_url?: string;
+  logout_url?: string;
+  user?: {
+    username: string;
+    email: string;
+  };
 }
 
 enum FEATURES {

package/js/utils/test/factories/joanie.ts

@@ -171,6 +171,18 @@ export const OrganizationFactory = factory((): Organization => {
     dpo_email: faker.internet.email(),
     contact_phone: faker.phone.number(),
     address: AddressFactory().one(),
+    abilities: {
+      can_submit_for_signature_batch_order: faker.datatype.boolean(),
+      confirm_bank_transfer: faker.datatype.boolean(),
+      confirm_quote: faker.datatype.boolean(),
+      delete: faker.datatype.boolean(),
+      download_quote: faker.datatype.boolean(),
+      get: faker.datatype.boolean(),
+      manage_accesses: faker.datatype.boolean(),
+      patch: faker.datatype.boolean(),
+      put: faker.datatype.boolean(),
+      sign_contracts: faker.datatype.boolean(),
+    },
   };
 });
 

package/js/widgets/Dashboard/components/LearnerDashboardSidebar/index.tsx

@@ -7,6 +7,8 @@ import {
   DashboardSidebarProps,
 } from 'widgets/Dashboard/components/DashboardSidebar';
 import { useSession } from 'contexts/SessionContext';
+import { APIBackend } from 'types/api';
+import context from 'utils/context';
 import { UserHelper } from 'utils/UserHelper';
 
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
@@ -30,15 +32,18 @@ export const LearnerDashboardSidebar = (props: Partial<DashboardSidebarProps>) =
 
   const getRouteLabel = getDashboardRouteLabel(intl);
 
+  const dashboardPaths = [
+    LearnerDashboardPaths.COURSES,
+    LearnerDashboardPaths.CERTIFICATES,
+    LearnerDashboardPaths.CONTRACTS,
+    LearnerDashboardPaths.BATCH_ORDERS,
+  ];
+  if (context?.authentication.backend !== APIBackend.KEYCLOAK) {
+    dashboardPaths.push(LearnerDashboardPaths.PREFERENCES);
+  }
   const links = useMemo(
     () =>
-      [
-        LearnerDashboardPaths.COURSES,
-        LearnerDashboardPaths.CERTIFICATES,
-        LearnerDashboardPaths.CONTRACTS,
-        LearnerDashboardPaths.PREFERENCES,
-        LearnerDashboardPaths.BATCH_ORDERS,
-      ].map((path) => ({
+      dashboardPaths.map((path) => ({
         to: generatePath(path),
         label: getRouteLabel(path),
         activePaths:

package/js/widgets/Dashboard/index.spec.tsx

@@ -1,4 +1,4 @@
-import { getByText, screen } from '@testing-library/react';
+import { getByText, queryByText, screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import userEvent from '@testing-library/user-event';
 import {
@@ -17,6 +17,7 @@ import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import context from 'utils/context';
 import { DashboardTest } from './components/DashboardTest';
 
 jest.mock('utils/context', () => ({
@@ -210,4 +211,23 @@ describe('<Dashboard />', () => {
     expectUrlMatchLocationDisplayed('/dummy/route');
     expect(screen.getByRole('heading', { name: /Page not found/ }));
   });
+
+  it('should not show preferences link when using keycloak backend', async () => {
+    // Temporarily change the authentication backend to keycloak
+    const originalBackend = context.authentication.backend;
+    context.authentication.backend = 'keycloak';
+
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
+    await expectNoSpinner('Loading orders and enrollments...');
+
+    const sidebar = screen.getByTestId('dashboard__sidebar');
+
+    // Verify that "My preferences" link is NOT present in the sidebar
+    expect(queryByText(sidebar, 'My preferences')).toBeNull();
+
+    // Restore original backend
+    context.authentication.backend = originalBackend;
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.2.2-dev27",
+  "version": "3.2.2-dev36",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -118,6 +118,7 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "js-cookie": "3.0.5",
+    "keycloak-js": "26.2.2",
     "lodash-es": "4.17.21",
     "mdn-polyfills": "5.20.0",
     "msw": "2.7.3",

package/tsconfig.json

@@ -19,7 +19,8 @@
     "module": "esnext",
     "moduleResolution": "node",
     "paths": {
-      "intl-pluralrules": ["types/libs/intl-pluralrules"]
+      "intl-pluralrules": ["types/libs/intl-pluralrules"],
+      "keycloak-js": ["../node_modules/keycloak-js/lib/keycloak"]
     },
     "resolveJsonModule": true,
     "skipLibCheck": true,