richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/components/Form/CountrySelectField.tsx

@@ -1,22 +1,34 @@
 import countries from 'i18n-iso-countries';
-import { forwardRef } from 'react';
-import { useIntl } from 'react-intl';
-import { SelectField, SelectFieldProps } from 'components/Form/Inputs';
+import { defineMessages, useIntl } from 'react-intl';
+import Select, { SelectProps } from './Select';
 
-export const CountrySelectField = forwardRef<HTMLSelectElement, SelectFieldProps>((props, ref) => {
+export const messages = defineMessages({
+  label: {
+    id: 'components.CountrySelectField.label',
+    description: 'label of the country select',
+    defaultMessage: 'Country',
+  },
+});
+
+export const CountrySelectField = ({
+  label: selectLabel,
+  ...props
+}: Omit<SelectProps, 'options'>) => {
   const intl = useIntl();
   const [languageCode] = intl.locale.split('-');
-  const countryList = countries.getNames(languageCode);
+
+  const countryList = Object.entries(countries.getNames(languageCode)).map(
+    ([value, label]: [string, string]) => {
+      return { value, label };
+    },
+    [],
+  );
+
   return (
-    <SelectField {...props} ref={ref}>
-      <option disabled value="-">
-        -
-      </option>
-      {Object.entries(countryList).map(([value, label]) => (
-        <option key={`address-countryList-${value}`} value={value}>
-          {label}
-        </option>
-      ))}
-    </SelectField>
+    <Select
+      label={selectLabel || intl.formatMessage(messages.label)}
+      options={countryList}
+      {...props}
+    />
   );
-});
+};

package/js/components/Form/Input/index.spec.tsx

@@ -0,0 +1,76 @@
+import { render, screen } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+import userEvent, { UserEvent } from '@testing-library/user-event';
+import { CunninghamProvider } from '@openfun/cunningham-react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { IntlProvider } from 'react-intl';
+import Input from '.';
+
+interface TestFormValues {
+  firstName: string;
+}
+
+describe('<Input/>', () => {
+  let user: UserEvent;
+
+  const Wrapper = ({ children, defaultValue }: PropsWithChildren & { defaultValue?: string }) => {
+    const form = useForm<TestFormValues>({
+      defaultValues: {
+        firstName: defaultValue,
+      },
+    });
+    return (
+      <IntlProvider locale="en">
+        <CunninghamProvider>
+          <FormProvider {...form}>{children}</FormProvider>
+        </CunninghamProvider>
+      </IntlProvider>
+    );
+  };
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  it('should initialize empty', () => {
+    render(
+      <Wrapper>
+        <Input label="FirstName" name="firstName" />
+      </Wrapper>,
+    );
+    const cunninghamInput = screen.getByRole('textbox', { name: 'FirstName' });
+    expect(cunninghamInput).toHaveValue('');
+  });
+
+  it('should change Input value', async () => {
+    render(
+      <Wrapper>
+        <Input label="FirstName" name="firstName" />
+      </Wrapper>,
+    );
+
+    const cunninghamInput = screen.getByRole('textbox', { name: 'FirstName' });
+    await user.type(cunninghamInput, 'Robert');
+    expect(cunninghamInput).toHaveValue('Robert');
+  });
+
+  it('should initialize with default value', () => {
+    render(
+      <Wrapper defaultValue="Robert">
+        <Input label="FirstName" name="firstName" />
+      </Wrapper>,
+    );
+    const cunninghamInput = screen.getByRole('textbox', { name: 'FirstName' });
+    expect(cunninghamInput).toHaveValue('Robert');
+  });
+
+  it('should Input a value', async () => {
+    render(
+      <Wrapper defaultValue="Robert">
+        <Input label="FirstName" name="firstName" />
+      </Wrapper>,
+    );
+    const cunninghamInput = screen.getByRole('textbox', { name: 'FirstName' });
+    userEvent.clear(cunninghamInput);
+    expect(cunninghamInput).toHaveValue('');
+  });
+});

package/js/components/Form/Input/index.tsx

@@ -0,0 +1,47 @@
+import {
+  InputProps as CunninghamInputProps,
+  Input as CunninghamInput,
+} from '@openfun/cunningham-react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useIntl } from 'react-intl';
+import { getLocalizedCunninghamErrorProp } from '../utils';
+
+export interface InputProps extends CunninghamInputProps {
+  name: string;
+}
+
+const Input = (props: InputProps) => {
+  const intl = useIntl();
+  const { control, setValue, formState } = useFormContext();
+  const error = props.name in formState.errors ? formState.errors[props.name] : undefined;
+  return (
+    <Controller
+      control={control}
+      name={props.name}
+      render={({ field }) => {
+        return (
+          <CunninghamInput
+            {...props}
+            aria-invalid={!!error}
+            state={error ? 'error' : 'default'}
+            {...getLocalizedCunninghamErrorProp(
+              intl,
+              error ? (error.message as string) : undefined,
+            )}
+            onBlur={(e) => {
+              field.onBlur();
+              props.onBlur?.(e);
+            }}
+            onChange={(e) => {
+              setValue(field.name, e.target.value);
+              props.onChange?.(e);
+            }}
+            value={field.value}
+          />
+        );
+      }}
+    />
+  );
+};
+
+export default Input;

package/js/components/Form/Select/index.spec.tsx

@@ -0,0 +1,99 @@
+import { render, screen, within } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+import userEvent, { UserEvent } from '@testing-library/user-event';
+import { CunninghamProvider, Option } from '@openfun/cunningham-react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { IntlProvider } from 'react-intl';
+import { changeSelect, clearSelect } from '../test-utils';
+import Select from '.';
+
+interface TestFormValues {
+  country: string;
+}
+
+describe('<Select/>', () => {
+  let user: UserEvent;
+  const countryOptions: Option[] = [
+    {
+      label: 'France',
+      value: 'fr',
+    },
+    {
+      label: 'England',
+      value: 'en',
+    },
+  ];
+  const Wrapper = ({
+    children,
+    defaultOptionValue,
+  }: PropsWithChildren & { defaultOptionValue?: string }) => {
+    const form = useForm<TestFormValues>({
+      defaultValues: {
+        country: defaultOptionValue,
+      },
+    });
+    return (
+      <IntlProvider locale="en">
+        <CunninghamProvider>
+          <FormProvider {...form}>{children}</FormProvider>
+        </CunninghamProvider>
+      </IntlProvider>
+    );
+  };
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  it('should initialize empty', () => {
+    render(
+      <Wrapper>
+        <Select label="Country" options={countryOptions} name="country" />
+      </Wrapper>,
+    );
+    const cunninghamSelect = screen.getByRole('combobox', { name: 'Country' });
+    expect(
+      within(cunninghamSelect).queryByDisplayValue(countryOptions[0].label),
+    ).not.toBeInTheDocument();
+    expect(
+      within(cunninghamSelect).queryByDisplayValue(countryOptions[1].label),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should change select value', async () => {
+    render(
+      <Wrapper>
+        <Select label="Country" options={countryOptions} name="country" />
+      </Wrapper>,
+    );
+
+    const selectOption = countryOptions[0];
+    const cunninghamSelect = screen.getByRole('combobox', { name: 'Country' });
+    await changeSelect(cunninghamSelect, selectOption.label, user);
+    expect(within(cunninghamSelect).getByDisplayValue(selectOption.value!)).toBeInTheDocument();
+  });
+
+  it('should initialize with default value', () => {
+    const defaultOption = countryOptions[0];
+    render(
+      <Wrapper defaultOptionValue={defaultOption.value}>
+        <Select label="Country" options={countryOptions} name="country" />
+      </Wrapper>,
+    );
+    const cunninghamSelect = screen.getByRole('combobox', { name: 'Country' });
+    expect(within(cunninghamSelect).getByDisplayValue(defaultOption.value!)).toBeInTheDocument();
+  });
+
+  it('should clear selected a value', async () => {
+    const defaultOption = countryOptions[0];
+    render(
+      <Wrapper defaultOptionValue={defaultOption.value}>
+        <Select label="Country" options={countryOptions} name="country" />
+      </Wrapper>,
+    );
+    const cunninghamSelect = screen.getByRole('combobox', { name: 'Country' });
+    await clearSelect(cunninghamSelect);
+    expect(
+      within(cunninghamSelect).queryByDisplayValue(defaultOption.value!),
+    ).not.toBeInTheDocument();
+  });
+});

package/js/components/Form/Select/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import {
+  Select as CunninghamSelect,
+  SelectProps as CunninghamSelectProps,
+} from '@openfun/cunningham-react';
+import { useIntl } from 'react-intl';
+import { getLocalizedCunninghamErrorProp } from '../utils';
+
+export interface SelectProps extends CunninghamSelectProps {
+  name: string;
+}
+
+const Select = (props: SelectProps) => {
+  const intl = useIntl();
+  const { control, setValue, formState } = useFormContext();
+  const error = props.name in formState.errors ? formState.errors[props.name] : undefined;
+  return (
+    <Controller
+      control={control}
+      name={props.name}
+      render={({ field }) => (
+        <CunninghamSelect
+          {...props}
+          onBlur={(e) => {
+            field.onBlur();
+            props.onBlur?.(e);
+          }}
+          onChange={(e) => {
+            setValue(field.name, e.target.value);
+            props.onChange?.(e);
+          }}
+          value={field.value}
+          aria-invalid={!!error}
+          state={error ? 'error' : 'default'}
+          {...getLocalizedCunninghamErrorProp(intl, error ? (error.message as string) : undefined)}
+        />
+      )}
+    />
+  );
+};
+
+export default Select;

package/js/components/{AddressesManagement → Form}/ValidationErrors.ts

@@ -1,5 +1,10 @@
 import { defineMessages } from 'react-intl';
 
+export interface ValidationError {
+  key: ErrorKeys;
+  values: Record<PropertyKey, string | number | Array<string | number>>;
+}
+
 export enum ErrorKeys {
   MIXED_INVALID = 'mixedInvalid',
   MIXED_REQUIRED = 'mixedRequired',
@@ -10,27 +15,27 @@ export enum ErrorKeys {
 
 export const errorMessages = defineMessages<ErrorKeys>({
   [ErrorKeys.MIXED_INVALID]: {
-    id: 'components.AddressesManagement.validationSchema.mixedInvalid',
+    id: 'components.Form.utils.errors.mixedInvalid',
     defaultMessage: 'This field is invalid.',
     description: 'Error message displayed when a field value is invalid.',
   },
   [ErrorKeys.MIXED_REQUIRED]: {
-    id: 'components.AddressesManagement.validationSchema.mixedRequired',
+    id: 'components.Form.utils.errors.mixedRequired',
     defaultMessage: 'This field is required.',
     description: 'Error message displayed when a field is required.',
   },
   [ErrorKeys.MIXED_ONEOF]: {
-    id: 'components.AddressesManagement.validationSchema.mixedOneOf',
+    id: 'components.Form.utils.errors.mixedOneOf',
     defaultMessage: 'You must select a value.',
     description: 'Error message displayed when a field value must be one of a list.',
   },
   [ErrorKeys.STRING_MAX]: {
-    id: 'components.AddressesManagement.validationSchema.stringMax',
+    id: 'components.Form.utils.errors.stringMax',
     defaultMessage: 'The maximum length is {max} {max, plural, one {char} other {chars}}.',
     description: 'Error message displayed when a field value is too long.',
   },
   [ErrorKeys.STRING_MIN]: {
-    id: 'components.AddressesManagement.validationSchema.stringMin',
+    id: 'components.Form.utils.errors.stringMin',
     defaultMessage: 'The minimum length is {min} {min, plural, one {char} other {chars}}.',
     description: 'Error message displayed when a field value is too short.',
   },

package/js/components/Form/index.ts

@@ -1 +1,5 @@
-export * from './Inputs';
+export { default as Select } from './Select';
+export { CountrySelectField } from './CountrySelectField';
+export { messages } from './messages';
+export * from './utils';
+export * from './ValidationErrors';

package/js/components/Form/messages.ts

@@ -0,0 +1,14 @@
+import { defineMessages } from 'react-intl';
+
+export const messages = defineMessages({
+  optionalFieldText: {
+    id: 'components.form.messages.optionalFieldText',
+    description: 'text display under form elements that are optional',
+    defaultMessage: '(optional)',
+  },
+  formOptionalFieldsText: {
+    id: 'components.form.messages.formOptionalFieldsText',
+    description: 'Text at the top of forms indicating what are optional fields',
+    defaultMessage: 'All fields are required unless marked optional',
+  },
+});

package/js/components/Form/test-utils.ts

@@ -0,0 +1,19 @@
+import { within } from '@testing-library/dom';
+import userEvent, { UserEvent } from '@testing-library/user-event';
+
+export const changeSelect = async (
+  $input: HTMLElement,
+  value: string,
+  user: UserEvent = userEvent.setup(),
+) => {
+  await userEvent.click($input);
+  const $selectListBox = within($input.closest('.c__field')!).getByRole('listbox');
+  await user.click(
+    within($selectListBox).getByRole('option', {
+      name: value,
+    }),
+  );
+};
+
+export const clearSelect = async ($input: HTMLElement, user: UserEvent = userEvent.setup()) =>
+  user.click(within($input.closest('.c__field')!).getByRole('button', { name: 'Clear selection' }));

package/js/components/Form/utils.spec.ts

@@ -0,0 +1,72 @@
+import { createIntl } from 'react-intl';
+import { ErrorKeys } from './ValidationErrors';
+import { getLocalizedCunninghamErrorProp, getLocalizedErrorMessage } from './utils';
+
+describe('Form > utils', () => {
+  describe('getLocalizedErrorMessage', () => {
+    it('should return expected message for existing errorKey', () => {
+      const intl = createIntl({ locale: 'en' });
+      expect(getLocalizedErrorMessage(intl, { key: ErrorKeys.MIXED_REQUIRED, values: {} })).toBe(
+        'This field is required.',
+      );
+      expect(getLocalizedErrorMessage(intl, { key: ErrorKeys.MIXED_ONEOF, values: {} })).toBe(
+        'You must select a value.',
+      );
+      expect(
+        getLocalizedErrorMessage(intl, {
+          key: ErrorKeys.STRING_MAX,
+          values: {
+            max: 1,
+          },
+        }),
+      ).toBe('The maximum length is 1 char.');
+      expect(
+        getLocalizedErrorMessage(intl, {
+          key: ErrorKeys.STRING_MAX,
+          values: {
+            max: 10,
+          },
+        }),
+      ).toBe('The maximum length is 10 chars.');
+      expect(
+        getLocalizedErrorMessage(intl, {
+          key: ErrorKeys.STRING_MIN,
+          values: {
+            min: 1,
+          },
+        }),
+      ).toBe('The minimum length is 1 char.');
+      expect(
+        getLocalizedErrorMessage(intl, {
+          key: ErrorKeys.STRING_MIN,
+          values: {
+            min: 10,
+          },
+        }),
+      ).toBe('The minimum length is 10 chars.');
+    });
+    it("should return default message when errorKey doesn't exists", () => {
+      const intl = createIntl({ locale: 'en' });
+      expect(getLocalizedErrorMessage(intl, 'UNKNOWN_KEY')).toBe('This field is invalid.');
+    });
+  });
+
+  describe('getLocalizedCunninghamErrorProp', () => {
+    it('should return default message when no error is given', () => {
+      const intl = createIntl({ locale: 'en' });
+      expect(
+        getLocalizedCunninghamErrorProp(intl, undefined, 'This is a default message.'),
+      ).toEqual({ text: 'This is a default message.' });
+    });
+    it('should return text prop', () => {
+      const intl = createIntl({ locale: 'en' });
+      expect(
+        getLocalizedCunninghamErrorProp(
+          intl,
+          { key: ErrorKeys.MIXED_REQUIRED, values: {} },
+          'This is a default message',
+        ),
+      ).toEqual({ text: 'This field is required.' });
+    });
+  });
+});

package/js/components/Form/utils.ts

@@ -0,0 +1,37 @@
+import { FieldProps } from '@openfun/cunningham-react';
+import { IntlShape } from 'react-intl';
+import { Maybe } from 'types/utils';
+import { ErrorKeys, ValidationError, errorMessages } from './ValidationErrors';
+
+export const getLocalizedErrorMessage = (
+  intl: IntlShape,
+  error: Maybe<string | ValidationError>,
+) => {
+  if (!error) return undefined;
+  if (typeof error === 'string' || !(error.key in errorMessages)) {
+    // If the error has not been translated we return a default error message.
+    return intl.formatMessage(errorMessages[ErrorKeys.MIXED_INVALID]);
+  }
+
+  return intl.formatMessage(errorMessages[error.key], error.values);
+};
+
+interface CunninghamErrorProp {
+  text?: FieldProps['text'];
+  textItems?: FieldProps['textItems'];
+}
+export const getLocalizedCunninghamErrorProp = (
+  intl: IntlShape,
+  error: Maybe<string | ValidationError>,
+  defaultMessage?: string,
+): CunninghamErrorProp | {} => {
+  const message = getLocalizedErrorMessage(intl, error);
+  const prop: CunninghamErrorProp = {};
+  if (Array.isArray(message)) {
+    prop.textItems = message.map((msg) => msg.toString());
+  } else {
+    prop.text = message || defaultMessage;
+  }
+
+  return prop;
+};

package/js/components/Icon/index.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { PropsWithChildren, useState, useRef, CSSProperties } from 'react';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import { Icon, IconTypeEnum } from './index';
 
 export default {
@@ -74,7 +75,7 @@ const IconContainer = ({ name, enumKey }: IconContainerProps) => {
 
     timeoutRef.current = setTimeout(() => {
       setShowTooltip(false);
-    }, 500);
+    }, HttpStatusCode.INTERNAL_SERVER_ERROR);
   };
 
   return (

package/js/components/Modal/_styles.scss

@@ -31,20 +31,12 @@
   }
 
   &__closeButton {
-    @include button-reset-style();
-    background-color: r-theme-val(modal, close-background);
-    @if r-theme-val(modal, close-border) != null {
-      border: thin solid r-theme-val(modal, close-border);
-    }
     box-sizing: initial;
-    color: r-theme-val(modal, close-color);
     display: flex;
-    height: 24px;
     margin: 0 0 0 auto;
     padding: 12px;
     position: sticky;
     top: 0;
-    width: 24px;
   }
 
   &__overlay {

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

@@ -3,12 +3,6 @@ import { IntlProvider } from 'react-intl';
 import { Modal } from '.';
 
 describe('<Modal />', () => {
-  beforeEach(() => {
-    const modalExclude = document.createElement('div');
-    modalExclude.setAttribute('id', 'modal-exclude');
-    document.body.appendChild(modalExclude);
-  });
-
   it('merges custom classNames of type string with the default classes', () => {
     render(
       <IntlProvider locale="en">

package/js/components/Modal/index.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useMemo } from 'react';
 import ReactModal from 'react-modal';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Button, CunninghamProvider } from '@openfun/cunningham-react';
 import { StringHelper } from 'utils/StringHelper';
 import { Icon, IconTypeEnum } from 'components/Icon';
 
@@ -68,23 +69,28 @@ export const Modal = ({
       overlayClassName={mergeClasses({ base: 'modal__overlay', classes: overlayClassName })}
       {...props}
     >
-      <header className={headerClasses.join(' ')}>
-        {StringHelper.isString(title) && <h2>{title}</h2>}
-        {!StringHelper.isString(title) && title}
-        {hasCloseButton && (
-          <button
-            className="modal__closeButton"
-            onClick={(e) => props.onRequestClose?.(e)}
-            title={intl.formatMessage(messages.closeDialog)}
-          >
-            <Icon name={IconTypeEnum.ROUND_CLOSE} />
-            <span className="offscreen">
-              <FormattedMessage {...messages.closeDialog} />
-            </span>
-          </button>
-        )}
-      </header>
-      {children}
+      <CunninghamProvider>
+        <header className={headerClasses.join(' ')}>
+          {StringHelper.isString(title) && <h2>{title}</h2>}
+          {!StringHelper.isString(title) && title}
+          {hasCloseButton && (
+            <Button
+              aria-label={intl.formatMessage(messages.closeDialog)}
+              className="modal__closeButton"
+              onClick={(e) => props.onRequestClose?.(e)}
+              title={intl.formatMessage(messages.closeDialog)}
+              color="tertiary"
+              size="small"
+            >
+              <Icon name={IconTypeEnum.ROUND_CLOSE} />
+              <span className="offscreen">
+                <FormattedMessage {...messages.closeDialog} />
+              </span>
+            </Button>
+          )}
+        </header>
+        {children}
+      </CunninghamProvider>
     </ReactModal>
   );
 };

package/js/components/PaymentButton/_styles.scss

@@ -0,0 +1,26 @@
+.payment-button {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  &__error {
+    color: r-color('firebrick6');
+    margin-top: 0.5rem;
+  }
+
+  &__terms {
+    button {
+      color: $link-color;
+      text-decoration: underline;
+      background-color: transparent;
+      border: none;
+      padding: 0;
+
+      &:hover {
+        color: $link-hover-color;
+      }
+    }
+  }
+}

package/js/{widgets/CourseProductItem → components/PaymentButton}/components/PaymentInterfaces/Dummy.tsx

@@ -1,6 +1,6 @@
 import { handle } from 'utils/errors/handle';
 import { useAsyncEffect } from 'hooks/useAsyncEffect';
-import { PaymentErrorMessageId } from '../PaymentButton';
+import { PaymentErrorMessageId } from 'components/PaymentButton';
 import type { PaymentInterfaceProps } from '.';
 
 /**