richie-education 2.30.1-dev22 → 2.30.1-dev25

package/js/api/lms/openedx-fonzie.spec.ts

@@ -22,7 +22,7 @@ describe('Fonzie API', () => {
 
   it('uses its own route to get user information', async () => {
     const user = {
-      username: faker.internet.userName(),
+      username: faker.internet.username(),
     };
 
     fetchMock.get('https://demo.endpoint.api/api/v1.0/user/me', user);

package/js/api/lms/openedx-hawthorn.spec.ts

@@ -48,7 +48,7 @@ describe('OpenEdX Hawthorn API', () => {
   describe('enrollment', () => {
     beforeEach(() => {
       courseId = faker.string.uuid();
-      username = faker.internet.userName();
+      username = faker.internet.username();
       fetchMock.restore();
       mockHandle.mockRestore();
     });

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

@@ -1,30 +1,72 @@
 import { Alert, Checkbox, VariantType } from '@openfun/cunningham-react';
 import { useCallback, useEffect, useState } from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl/lib';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
+import { ProductType } from 'types/Joanie';
 
 const messages = defineMessages({
+  waiveCheckboxLabel: {
+    defaultMessage: 'By checking this box:',
+    description: 'Label of the checkbox to waive the withdrawal right.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.waiveCheckboxLabel',
+  },
+});
+
+const credentialProductMessages = defineMessages({
   waiveCheckboxExplanation: {
     defaultMessage:
-      'This training will start before the end of your withdrawal period. You must waive it to subscribe.',
+      'The training program you wish to enroll in begins before the end of the 14-day withdrawal period mentioned in Article L221-18 of the French Consumer Code. You must check the box below to proceed with your registration.',
     description: 'Text to explain why the user has to waive to its withdrawal right.',
-    id: 'components.SaleTunnel.WithdrawRightCheckbox.waiverLabel',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.credential.waiverLabel',
   },
-  waiveCheckboxLabel: {
-    defaultMessage: 'I waive my right of withdrawal',
-    description: 'Label of the checkbox to waive the withdrawal right.',
-    id: 'components.SaleTunnel.WithdrawRightCheckbox.waiveCheckboxLabel',
+  waiveCheckboxHelperClause1: {
+    defaultMessage:
+      'I acknowledge that I have expressly requested to begin the training before the expiration date of the withdrawal period.',
+    description: 'First clause item for the waiver checkbox.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.credential.waiveCheckboxHelperClause1',
+  },
+  waiveCheckboxHelperClause2: {
+    defaultMessage:
+      'I expressly waive my right of withdrawal in order to begin the training before the expiration of the withdrawal period.',
+    description: 'Second clause item for the waiver checkbox.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.credential.waiveCheckboxHelperClause2',
+  },
+});
+
+const certificateProductMessages = defineMessages({
+  waiveCheckboxExplanation: {
+    defaultMessage:
+      'If the examination period begins before the end of the 14-day withdrawal period mentioned in Article L221-18 of the French Consumer Code, you must check the box below to proceed with your registration.',
+    description: 'Text to explain why the user has to waive to its withdrawal right.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.certificate.waiverLabel',
+  },
+  waiveCheckboxHelperClause1: {
+    defaultMessage:
+      'I acknowledge that I have expressly requested my registration for the examination before the expiration date of the withdrawal period.',
+    description: 'First clause item for the waiver checkbox.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.certificate.waiveCheckboxHelperClause1',
+  },
+  waiveCheckboxHelperClause2: {
+    defaultMessage:
+      'I expressly waive my right of withdrawal in order to register for the examination before the expiration of the withdrawal period.',
+    description: 'Second clause item for the waiver checkbox.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.certificate.waiveCheckboxHelperClause2',
   },
 });
 
 const WithdrawRightCheckbox = () => {
   const {
-    props: { isWithdrawable },
+    props: { isWithdrawable, product },
     registerSubmitCallback,
     unregisterSubmitCallback,
     hasWaivedWithdrawalRight,
     setHasWaivedWithdrawalRight,
   } = useSaleTunnelContext();
+  const intl = useIntl();
+  const clauseMessages =
+    product.type === ProductType.CERTIFICATE
+      ? certificateProductMessages
+      : credentialProductMessages;
   const [hasErrorState, setHasError] = useState(false);
   const setError = useCallback(async () => {
     setHasError(!isWithdrawable && !hasWaivedWithdrawalRight);
@@ -44,13 +86,17 @@ const WithdrawRightCheckbox = () => {
       data-testid="withdraw-right-checkbox"
     >
       <Alert type={hasErrorState ? VariantType.ERROR : VariantType.WARNING} className="mb-s">
-        <FormattedMessage {...messages.waiveCheckboxExplanation} />
+        <FormattedMessage {...clauseMessages.waiveCheckboxExplanation} />
       </Alert>
       <Checkbox
         className="waiveCheckbox__input"
-        label={<FormattedMessage {...messages.waiveCheckboxLabel} />}
+        label={intl.formatMessage(messages.waiveCheckboxLabel)}
         checked={hasWaivedWithdrawalRight}
         onChange={(e) => setHasWaivedWithdrawalRight(e.target.checked)}
+        textItems={[
+          intl.formatMessage(clauseMessages.waiveCheckboxHelperClause1),
+          intl.formatMessage(clauseMessages.waiveCheckboxHelperClause2),
+        ]}
       />
     </section>
   );

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

@@ -273,7 +273,9 @@ describe('SaleTunnel', () => {
     /**
      * Make sure the checkbox to waive withdrawal right is displayed
      */
-    const $waiveCheckbox = screen.getByLabelText('I waive my right of withdrawal');
+    const $waiveCheckbox = within(screen.getByTestId('withdraw-right-checkbox')).getByRole(
+      'checkbox',
+    );
 
     /**
      * Subscribe

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

@@ -493,4 +493,41 @@ describe.each([
 
     expect(screen.queryByTestId('withdraw-right-checkbox')).toBeNull();
   });
+
+  it('should show a specific checkbox to waive withdrawal right according to the product type', async () => {
+    const product = ProductFactory().one();
+    const schedule = PaymentInstallmentFactory().many(2);
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
+        schedule,
+      );
+
+    render(<Wrapper product={product} isWithdrawable={false} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    screen.getByTestId('withdraw-right-checkbox');
+
+    const expectedMessages =
+      productType === ProductType.CERTIFICATE
+        ? [
+            'If the examination period begins before the end of the 14-day withdrawal period mentioned in Article L221-18 of the French Consumer Code, you must check the box below to proceed with your registration.',
+            'I acknowledge that I have expressly requested my registration for the examination before the expiration date of the withdrawal period.',
+            'I expressly waive my right of withdrawal in order to register for the examination before the expiration of the withdrawal period.',
+          ]
+        : [
+            'The training program you wish to enroll in begins before the end of the 14-day withdrawal period mentioned in Article L221-18 of the French Consumer Code. You must check the box below to proceed with your registration.',
+            'I acknowledge that I have expressly requested to begin the training before the expiration date of the withdrawal period.',
+            'I expressly waive my right of withdrawal in order to begin the training before the expiration of the withdrawal period.',
+          ];
+
+    expectedMessages.forEach((message) => {
+      screen.getByText(message);
+    });
+  });
 });

package/js/contexts/SessionContext/index.spec.tsx

@@ -119,7 +119,7 @@ describe('SessionProvider', () => {
     });
 
     it('provides user infos if user is authenticated then stores in cache', async () => {
-      const username = faker.internet.userName();
+      const username = faker.internet.username();
       const userDeferred = new Deferred();
       fetchMock.get('https://endpoint.test/api/user/v1/me', userDeferred.promise);
       const { result } = renderHook(useSession, {
@@ -146,7 +146,7 @@ describe('SessionProvider', () => {
     });
 
     it('destroy session then logout', async () => {
-      const username = faker.internet.userName();
+      const username = faker.internet.username();
       const userDeferred = new Deferred();
 
       fetchMock.get('https://endpoint.test/api/user/v1/me', userDeferred.promise);

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

@@ -38,7 +38,7 @@ describe('factory', () => {
     }
     return {
       fullname,
-      username: faker.internet.userName(),
+      username: faker.internet.username(),
       mainAddress: DemoAddressFactory().one(),
       addresses: DemoAddressFactory().many(3),
       favoriteColors: Array(2).fill(faker.color.human()),

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

@@ -51,7 +51,7 @@ import { factory } from './factories';
 export const UserLightFactory = factory((): UserLight => {
   return {
     id: faker.string.uuid(),
-    username: faker.internet.userName(),
+    username: faker.internet.username(),
     full_name: faker.person.fullName(),
     email: faker.internet.email(),
   };
@@ -59,7 +59,7 @@ export const UserLightFactory = factory((): UserLight => {
 export const JoanieUserProfileFactory = factory((): JoanieUserProfile => {
   return {
     id: faker.string.uuid(),
-    username: faker.internet.userName(),
+    username: faker.internet.username(),
     full_name: faker.person.fullName(),
     is_superuser: false,
     is_staff: false,
@@ -394,7 +394,7 @@ export const NestedCertificateOrderFactory = factory((): NestedCertificateOrder
     enrollment: EnrollmentLightFactory().one(),
     organization: OrganizationFactory().one(),
     product_title: FactoryHelper.unique(faker.lorem.words, { args: [1] }),
-    owner_name: faker.internet.userName(),
+    owner_name: faker.internet.username(),
     state: OrderState.COMPLETED,
   };
 });
@@ -406,7 +406,7 @@ export const NestedCredentialOrderFactory = factory((): NestedCredentialOrder =>
     enrollment: null,
     organization: OrganizationFactory().one(),
     product_title: FactoryHelper.unique(faker.lorem.words, { args: [1] }),
-    owner_name: faker.internet.userName(),
+    owner_name: faker.internet.username(),
     state: OrderState.COMPLETED,
   };
 });
@@ -415,7 +415,7 @@ const AbstractOrderFactory = factory((): Order => {
   return {
     id: faker.string.uuid(),
     created_on: faker.date.past({ years: 1 }).toISOString(),
-    owner: faker.internet.userName(),
+    owner: faker.internet.username(),
     total: faker.number.int(),
     total_currency: faker.finance.currencyCode(),
     main_invoice_reference: faker.string.uuid(),

package/js/utils/test/factories/openEdx.tsx

@@ -9,7 +9,7 @@ import { factory } from './factories';
 
 export const OpenEdxApiProfileFactory = factory((): OpenEdxApiProfile => {
   return {
-    username: faker.internet.userName(),
+    username: faker.internet.username(),
     name: faker.person.fullName(),
     country: faker.location.countryCode(),
     year_of_birth: faker.date.past().toISOString(),

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

@@ -154,7 +154,7 @@ export const UserFactory = factory<User>(() => ({
   access_token: faker.lorem.word(12),
   full_name: faker.person.fullName(),
   email: faker.internet.email(),
-  username: faker.internet.userName(),
+  username: faker.internet.username(),
 }));
 
 export const FonzieUserFactory = factory<User>(() => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.30.1-dev22",
+  "version": "2.30.1-dev25",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {

package/scss/colors/_theme.scss

@@ -147,6 +147,10 @@ $r-theme: (
     content-color: r-color('slate-grey'),
     description-color: r-color('slate-grey'),
   ),
+  simpletext-variant-box: (
+    primary-color: r-color('denim'),
+    secondary-color: r-color('white'),
+  ),
   blogpost-glimpse: (
     card-background: r-color('white'),
     title-color: r-color('black'),

package/scss/components/_index.scss

@@ -59,6 +59,7 @@
 
 @import './templates/courses/plugins/category_plugin';
 @import './templates/courses/plugins/licence_plugin';
+@import './templates/richie/simpletext/simpletext';
 @import './templates/richie/section/section';
 @import './templates/richie/large_banner/large_banner';
 @import './templates/richie/large_banner/compacted_banner';

package/scss/components/templates/richie/simpletext/_simpletext.scss

@@ -0,0 +1,43 @@
+// CKEditor 'simple text' plugin
+//
+// This aims to only adjust every possible plugins so they correctly fit since they
+// were done for 100% size only. No colour, font or anything else should be changed
+// here.
+//
+$r-simpletext-margin-bottom: 0.5rem !default;
+$r-simpletext-variant-padding: 1rem !default;
+$r-simpletext-variant-radius: 0.75rem !default;
+
+.simple-text {
+  margin-bottom: $r-simpletext-margin-bottom;
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
+
+  &__variant-round-box {
+    padding: $r-simpletext-variant-padding;
+    border: 1px solid transparent;
+    border-radius: $r-simpletext-variant-radius;
+  }
+
+  &__variant-stroked {
+    border-color: r-theme-val(simpletext-variant-box, primary-color);
+    background: r-theme-val(simpletext-variant-box, secondary-color);
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: r-theme-val(simpletext-variant-box, primary-color);
+    }
+  }
+
+  &__variant-fulfilled {
+    color: r-theme-val(simpletext-variant-box, secondary-color);
+    border-color: r-theme-val(simpletext-variant-box, primary-color);
+    background: r-theme-val(simpletext-variant-box, primary-color);
+  }
+}