richie-education 2.14.1 → 2.16.0

package/.storybook/main.js

@@ -0,0 +1,17 @@
+module.exports = {
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+    "../js/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  },
+  staticDirs: ['../../richie/static', '../../richie/apps/core/templates/richie'],
+}

package/.storybook/preview-body.html

@@ -0,0 +1 @@
+<div id="modal-exclude" style="min-height: 0;"></div>

package/.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" type="text/css" href="/richie/css/main.css">

package/.storybook/preview.tsx

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { useAsyncEffect } from "../js/utils/useAsyncEffect";
+
+export const parameters = {
+  actions: {argTypesRegex: "^on[A-Z].*"},
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
+
+const IconsWrapper = props => {
+  const [symbols, setSymbols] = useState('');
+
+  useAsyncEffect(async () => {
+    const response = await fetch('/icons.html');
+    const body = await response.text();
+    setSymbols(body);
+  }, []);
+
+  return (
+    <div>
+      <div dangerouslySetInnerHTML={{__html: symbols}}/>
+      {props.children}
+    </div>
+  );
+};
+
+export const decorators = [
+  (Story) => (
+    <IconsWrapper>
+      <Story/>
+    </IconsWrapper>
+  ),
+];

package/jest/resolver.js

@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+/*
+  Read this issue for further information
+  https://github.com/microsoft/accessibility-insights-web/pull/5421#issuecomment-1109168149
+*/
+
+module.exports = (path, options) => {
+  // Call the defaultResolver, so we leverage its cache, error handling, etc.
+  return options.defaultResolver(path, {
+    ...options,
+    // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)
+    packageFilter: (pkg) => {
+      // This is a workaround for https://github.com/uuidjs/uuid/pull/616
+      //
+      // jest-environment-jsdom 28+ tries to use browser exports instead of default exports,
+      // but uuid only offers an ESM browser export and not a CommonJS one. Jest does not yet
+      // support ESM modules natively, so this causes a Jest error related to trying to parse
+      // "export" syntax.
+      //
+      // This workaround prevents Jest from considering uuid's module-based exports at all;
+      // it falls back to uuid's CommonJS+node "main" property.
+      //
+      // Once we're able to migrate our Jest config to ESM and a browser crypto
+      // implementation is available for the browser+ESM version of uuid to use (eg, via
+      // https://github.com/jsdom/jsdom/pull/3352 or a similar polyfill), this can go away.
+      if (pkg.name === 'uuid') {
+        delete pkg.exports;
+        delete pkg.module;
+      }
+      return pkg;
+    },
+  });
+};

package/jest/setup.ts

@@ -0,0 +1,30 @@
+// Extend jest matchers with jest-dom's
+import '@testing-library/jest-dom/extend-expect';
+
+import { setLogger } from 'react-query';
+import { noop } from 'utils';
+
+/*
+ * A little trick to prevent so package to be reset when using `jest.resetModules()`.
+ * https://github.com/facebook/jest/issues/8987#issuecomment-584898030
+ */
+const RESET_MODULE_EXCEPTIONS = ['react', 'react-intl'];
+
+const mockActualRegistry: Record<PropertyKey, any> = {};
+
+RESET_MODULE_EXCEPTIONS.forEach((moduleName) => {
+  jest.doMock(moduleName, () => {
+    if (!mockActualRegistry[moduleName]) {
+      mockActualRegistry[moduleName] = jest.requireActual(moduleName);
+    }
+    return mockActualRegistry[moduleName];
+  });
+});
+
+/* Prevent log error during tests */
+setLogger({
+  // eslint-disable-next-line no-console
+  log: console.log,
+  warn: console.warn,
+  error: noop,
+});

package/jest.config.js

@@ -6,12 +6,15 @@ module.exports = {
   moduleNameMapper: {
     '\\.(css)$': '<rootDir>/front/__mocks__/styleMock.js',
   },
-  setupFilesAfterEnv: ['./js/testSetup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/jest/setup.ts'],
   testMatch: [`${__dirname}/js/**/*.spec.+(ts|tsx|js)`],
-  testURL: 'https://localhost',
   coverageDirectory: '.coverage',
   testEnvironment: 'jsdom',
-  transformIgnorePatterns: ['node_modules/(?!(lodash-es)/)'],
+  testEnvironmentOptions: {
+    url: 'https://localhost',
+  },
+  resolver: '<rootDir>/jest/resolver.js',
+  transformIgnorePatterns: ['node_modules/(?!(lodash-es|@hookform/resolvers)/)'],
   globals: {
     RICHIE_VERSION: 'test',
   },

package/js/components/AddressesManagement/AddressForm.spec.tsx

@@ -0,0 +1,191 @@
+import { act } from '@testing-library/react-hooks';
+import { fireEvent, getByText, render, screen } from '@testing-library/react';
+import * as mockFactories from 'utils/test/factories';
+import { AddressFactory } from 'utils/test/factories';
+import countries from 'i18n-iso-countries';
+import { IntlProvider } from 'react-intl';
+import { Address } from 'types/Joanie';
+import { ErrorKeys } from './validationSchema';
+import AddressForm from './AddressForm';
+
+jest.mock('hooks/useAddresses', () => ({
+  useAddresses: () => ({
+    states: {
+      creating: false,
+      updating: false,
+    },
+  }),
+}));
+
+describe('AddressForm', () => {
+  const handleReset = jest.fn();
+  const onSubmit = jest.fn();
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    jest.resetModules();
+  });
+
+  it('renders a button with label "Use this address" when no address is provided', () => {
+    render(
+      <IntlProvider locale="en">
+        <AddressForm handleReset={handleReset} onSubmit={onSubmit} />
+      </IntlProvider>,
+    );
+
+    screen.getByRole('button', { name: 'Use this address' });
+    expect(screen.queryByRole('button', { name: 'Cancel' })).toBeNull();
+  });
+
+  it('renders a button with label "Use this address" and a cancel button when no address is provided', async () => {
+    const address: Address = AddressFactory.generate();
+    render(
+      <IntlProvider locale="en">
+        <AddressForm handleReset={handleReset} onSubmit={onSubmit} address={address} />
+      </IntlProvider>,
+    );
+
+    screen.getByRole('button', { name: 'Update this address' });
+
+    const $button = screen.getByRole('button', { name: 'Cancel' });
+    await act(async () => {
+      fireEvent.click($button);
+    });
+    expect(handleReset).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders an error message when a value in the form is invalid', async () => {
+    render(
+      <IntlProvider locale="en">
+        <AddressForm handleReset={handleReset} onSubmit={onSubmit} />
+      </IntlProvider>,
+    );
+
+    screen.getByRole('form');
+    const $titleInput = screen.getByRole('textbox', { name: 'Address title' });
+    const $firstnameInput = screen.getByRole('textbox', { name: "Recipient's first name" });
+    const $lastnameInput = screen.getByRole('textbox', { name: "Recipient's last name" });
+    const $addressInput = screen.getByRole('textbox', { name: 'Address' });
+    const $cityInput = screen.getByRole('textbox', { name: 'City' });
+    const $postcodeInput = screen.getByRole('textbox', { name: 'Postcode' });
+    const $countryInput = screen.getByRole('combobox', { name: 'Country' });
+    const $submitButton = screen.getByRole('button', {
+      name: 'Use this address',
+    }) as HTMLButtonElement;
+
+    // - Until form is not fulfill, submit button should be disabled
+    expect($submitButton.disabled).toBe(true);
+
+    // - User fulfills address fields
+    const address = mockFactories.AddressFactory.generate();
+
+    await act(async () => {
+      fireEvent.input($titleInput, { target: { value: address.title } });
+      fireEvent.change($firstnameInput, { target: { value: address.first_name } });
+      fireEvent.change($lastnameInput, { target: { value: address.last_name } });
+      fireEvent.change($addressInput, { target: { value: address.address } });
+      fireEvent.change($cityInput, { target: { value: address.city } });
+      fireEvent.change($postcodeInput, { target: { value: address.postcode } });
+      fireEvent.change($countryInput, { target: { value: address.country } });
+      // - As form validation is triggered on blur, we need to trigger this event in
+      //   order to update form state.
+      fireEvent.blur($countryInput);
+    });
+
+    // Once the form has been fulfilled properly, submit button should be enabled.
+    expect($submitButton.disabled).toBe(false);
+
+    // Before submitting, we change field values to corrupt the form data
+    await act(async () => {
+      fireEvent.input($titleInput, { target: { value: 'a' } });
+      fireEvent.input($firstnameInput, { target: { value: '' } });
+      fireEvent.change($countryInput, { target: { value: '-' } });
+      fireEvent.click($submitButton);
+    });
+
+    expect(onSubmit).not.toHaveBeenCalled();
+
+    // Error messages should have been displayed.
+    // Title field should have a message saying that the value is too short.
+    getByText($titleInput.closest('.form-field')!, 'The minimum length is 2 chars.');
+    // Firstname field should have a message saying that the value is required.
+    getByText($firstnameInput.closest('.form-field')!, 'This field is required.');
+    // Country field should have a message saying that the value is not valid.
+    getByText(
+      $countryInput.closest('.form-field')!,
+      `You must select a value within: ${Object.keys(countries.getAlpha2Codes()).join(', ')}.`,
+    );
+  });
+
+  it('renders default error message when error message does not exist', async () => {
+    jest.doMock('./validationSchema', () => ({
+      __esModule: true,
+      ...jest.requireActual('./validationSchema'),
+      errorMessages: {
+        [ErrorKeys.MIXED_INVALID]: {
+          id: 'components.AddressesManagement.validationSchema.mixedInvalid',
+          defaultMessage: 'This field is invalid.',
+          description: 'Error message displayed when a field value is invalid.',
+        },
+      },
+    }));
+
+    // Import locally to get module with mocked error messages.
+    const Form = jest.requireActual('./AddressForm').default;
+
+    render(
+      <IntlProvider locale="en">
+        <Form handleReset={handleReset} onSubmit={onSubmit} />
+      </IntlProvider>,
+    );
+
+    screen.getByRole('form');
+    const $titleInput = screen.getByRole('textbox', { name: 'Address title' });
+    const $firstnameInput = screen.getByRole('textbox', { name: "Recipient's first name" });
+    const $lastnameInput = screen.getByRole('textbox', { name: "Recipient's last name" });
+    const $addressInput = screen.getByRole('textbox', { name: 'Address' });
+    const $cityInput = screen.getByRole('textbox', { name: 'City' });
+    const $postcodeInput = screen.getByRole('textbox', { name: 'Postcode' });
+    const $countryInput = screen.getByRole('combobox', { name: 'Country' });
+    const $submitButton = screen.getByRole('button', {
+      name: 'Use this address',
+    }) as HTMLButtonElement;
+
+    // - Until form is not fulfill, submit button should be disabled
+    expect($submitButton.disabled).toBe(true);
+
+    // - User fulfills address fields
+    const address = mockFactories.AddressFactory.generate();
+
+    await act(async () => {
+      fireEvent.input($titleInput, { target: { value: address.title } });
+      fireEvent.change($firstnameInput, { target: { value: address.first_name } });
+      fireEvent.change($lastnameInput, { target: { value: address.last_name } });
+      fireEvent.change($addressInput, { target: { value: address.address } });
+      fireEvent.change($cityInput, { target: { value: address.city } });
+      fireEvent.change($postcodeInput, { target: { value: address.postcode } });
+      fireEvent.change($countryInput, { target: { value: address.country } });
+      // - As form validation is triggered on blur, we need to trigger this event in
+      //   order to update form state.
+      fireEvent.blur($countryInput);
+    });
+
+    // Once the form has been fulfilled properly, submit button should be enabled.
+    expect($submitButton.disabled).toBe(false);
+
+    // Before submitting, we change field values to corrupt the form data
+    await act(async () => {
+      fireEvent.input($titleInput, { target: { value: 'a' } });
+      fireEvent.input($firstnameInput, { target: { value: '' } });
+      fireEvent.change($countryInput, { target: { value: '-' } });
+      fireEvent.click($submitButton);
+    });
+
+    expect(onSubmit).not.toHaveBeenCalled();
+
+    // Default error messages should have been displayed.
+    getByText($titleInput.closest('.form-field')!, 'This field is invalid.');
+    getByText($firstnameInput.closest('.form-field')!, 'This field is invalid.');
+    getByText($countryInput.closest('.form-field')!, `This field is invalid.`);
+  });
+});

package/js/components/AddressesManagement/AddressForm.tsx

@@ -7,7 +7,8 @@ import { messages } from 'components/AddressesManagement/index';
 import { CheckboxField, SelectField, TextField } from 'components/Form';
 import { useAddresses } from 'hooks/useAddresses';
 import type { Address } from 'types/Joanie';
-import validationSchema from './validationSchema';
+import { Maybe } from 'types/utils';
+import validationSchema, { ErrorKeys, errorMessages } from './validationSchema';
 
 export type AddressFormValues = Omit<Address, 'id' | 'is_main'> & { save: boolean };
 
@@ -41,6 +42,25 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
   const [languageCode] = intl.locale.split('-');
   const countryList = countries.getNames(languageCode);
 
+  const getLocalizedErrorMessage = (
+    error: Maybe<
+      | string
+      | {
+          key: ErrorKeys;
+          values: Record<PropertyKey, string | number | Array<string | number>>;
+        }
+    >,
+  ) => {
+    if (!error) return undefined;
+
+    if (typeof error === 'string' || errorMessages[error.key] === undefined) {
+      // 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);
+  };
+
   /**
    * Prevent form to be submitted and clear `editedAddress` state.
    */
@@ -62,6 +82,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
         id="title"
         label={intl.formatMessage(messages.titleInputLabel)}
         error={!!formState.errors.title}
+        message={getLocalizedErrorMessage(formState.errors.title?.message)}
         {...register('title')}
       />
       <div className="form-group">
@@ -71,6 +92,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
           id="first_name"
           label={intl.formatMessage(messages.first_nameInputLabel)}
           error={!!formState.errors.first_name}
+          message={getLocalizedErrorMessage(formState.errors.first_name?.message)}
           {...register('first_name')}
         />
         <TextField
@@ -79,6 +101,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
           id="last_name"
           label={intl.formatMessage(messages.last_nameInputLabel)}
           error={!!formState.errors.last_name}
+          message={getLocalizedErrorMessage(formState.errors.last_name?.message)}
           {...register('last_name')}
         />
       </div>
@@ -88,6 +111,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
         id="address"
         label={intl.formatMessage(messages.addressInputLabel)}
         error={!!formState.errors.address}
+        message={getLocalizedErrorMessage(formState.errors.address?.message)}
         {...register('address')}
       />
       <div className="form-group">
@@ -97,6 +121,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
           id="postcode"
           label={intl.formatMessage(messages.postcodeInputLabel)}
           error={!!formState.errors.postcode}
+          message={getLocalizedErrorMessage(formState.errors.postcode?.message)}
           {...register('postcode')}
         />
         <TextField
@@ -105,6 +130,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
           id="city"
           label={intl.formatMessage(messages.cityInputLabel)}
           error={!!formState.errors.city}
+          message={getLocalizedErrorMessage(formState.errors.city?.message)}
           {...register('city')}
         />
       </div>
@@ -114,6 +140,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
         id="country"
         label={intl.formatMessage(messages.countryInputLabel)}
         error={!!formState.errors.country}
+        message={getLocalizedErrorMessage(formState.errors.country?.message)}
         {...register('country', { value: address?.country, required: true })}
       >
         <option disabled value="-">
@@ -132,6 +159,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
           id="save"
           label={intl.formatMessage(messages.saveInputLabel)}
           error={!!formState.errors?.save}
+          message={getLocalizedErrorMessage(formState.errors.save?.message)}
           {...register('save')}
         />
       ) : null}
@@ -139,14 +167,14 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
         {address ? (
           <Fragment>
             <button
-              className="button button--active"
+              className="button button-sale--tertiary"
               onClick={handleCancel}
               title={intl.formatMessage(messages.cancelTitleButton)}
             >
               <FormattedMessage {...messages.cancelButton} />
             </button>
             <button
-              className="button button--primary"
+              className="button button-sale--primary"
               disabled={!formState.isValid || addresses.states.updating}
               type="submit"
             >
@@ -155,7 +183,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
           </Fragment>
         ) : (
           <button
-            className="button button--primary"
+            className="button button-sale--primary"
             disabled={!formState.isValid || addresses.states.creating || addresses.states.updating}
             type="submit"
           >

package/js/components/AddressesManagement/_styles.scss

@@ -8,7 +8,7 @@
   }
 
   & > .button {
-    .button__icon {
+    .icon.button__icon {
       display: inline-block;
       fill: none;
       height: 1.2em;
@@ -60,82 +60,4 @@
     list-style: none;
     padding: 0;
   }
-  .registered-addresses-item {
-    @include shadowed-box($padding: 1rem);
-    align-items: center;
-    display: flex;
-
-    &:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-
-    @include media-breakpoint-down(md) {
-      align-items: start;
-      flex-direction: column;
-
-      &__actions {
-        align-self: end;
-      }
-    }
-
-    & > * {
-      margin: 0;
-    }
-
-    .address-main-indicator {
-      $tick-size: 1.125rem;
-      background-color: r-theme-val(form, input-unchecked-background);
-      border-radius: 100vw;
-      border: 2px solid r-theme-val(form, input-unchecked-border);
-      box-sizing: border-box;
-      display: block;
-      height: $tick-size;
-      position: relative;
-      width: $tick-size;
-
-      &:before {
-        background: transparent;
-        border-radius: 100vw;
-        content: '';
-        display: block;
-        height: 60%;
-        left: 50%;
-        position: absolute;
-        top: 50%;
-        transform-origin: center center;
-        transform: translate(-50%, -50%) scale(calc(100 / 60));
-        transition: transform 400ms $r-ease-out;
-        width: 60%;
-      }
-
-      &--is-main {
-        background-color: r-theme-val(form, input-checked-background);
-        border-color: r-theme-val(form, input-checked-border);
-        color: r-theme-val(form, input-checked-color);
-
-        &:before {
-          background-color: r-theme-val(form, input-checked-color);
-          transform: translate(-50%, -50%) scale(1);
-        }
-      }
-    }
-
-    &__title {
-      font-size: 0.8rem;
-      margin-right: 0.8rem;
-    }
-    &__address {
-      flex: 1;
-      line-height: 1em;
-    }
-    &__actions {
-      & > .button {
-        min-width: 100px;
-
-        &:disabled {
-          visibility: hidden;
-        }
-      }
-    }
-  }
 }