richie-education 2.33.1-dev9 → 2.34.1-dev2

package/i18n/locales/vi-VN.json

@@ -507,10 +507,6 @@
     "description": "Empty placeholder of the dashboard credit cards management block",
     "message": "You haven't created any credit cards yet."
   },
-  "components.DashboardCreditCardsManagement.errorCannotPromoteMain": {
-    "description": "Error shown if a user tries to promote a main credit card",
-    "message": "Cannot promote main credit card."
-  },
   "components.DashboardCreditCardsManagement.header": {
     "description": "Title of the dashboard credit cards management block",
     "message": "Credit cards"
@@ -627,6 +623,10 @@
     "description": "Status shown on the dashboard order item when order is pending for payment",
     "message": "On going"
   },
+  "components.DashboardItem.Order.OrderStateLearnerMessage.statusRefunded": {
+    "description": "Status shown on the dashboard order item when order is refunded",
+    "message": "Refunded"
+  },
   "components.DashboardItem.Order.OrderStateLearnerMessage.statusWaitingCounterSignature": {
     "description": "Status shown on the dashboard order item when order is validated with contract's organization signature missing.",
     "message": "On going"
@@ -675,6 +675,10 @@
     "description": "Status shown on the dashboard order item when order is validated with no certificate",
     "message": "On going"
   },
+  "components.DashboardItem.Order.OrderStateTeacherMessage.statusRefunded": {
+    "description": "Status shown on the dashboard order item when order is refunded",
+    "message": "Refunded"
+  },
   "components.DashboardItem.Order.OrderStateTeacherMessage.statusWaitingCounterSignature": {
     "description": "Status shown on the dashboard order item when order is validated with contract's organization signature missing.",
     "message": "To be signed"
@@ -1187,6 +1191,14 @@
     "description": "Label for screen reader when a credit card is being tokenized.",
     "message": "Payment method definition in progress."
   },
+  "components.PaymentScheduleGrid.state.canceled": {
+    "description": "Label displayed for canceled payment state",
+    "message": "Canceled"
+  },
+  "components.PaymentScheduleGrid.state.error": {
+    "description": "Label displayed for error payment state. For learner we assume to display `pending`.",
+    "message": "Pending"
+  },
   "components.PaymentScheduleGrid.state.paid": {
     "description": "Label displayed for paid payment state",
     "message": "Paid"
@@ -1195,6 +1207,10 @@
     "description": "Label displayed for pending payment state",
     "message": "Pending"
   },
+  "components.PaymentScheduleGrid.state.refunded": {
+    "description": "Label displayed for refunded payment state",
+    "message": "Refunded"
+  },
   "components.PaymentScheduleGrid.state.refused": {
     "description": "Label displayed for refused payment state",
     "message": "Refused"
@@ -1527,6 +1543,10 @@
     "description": "Accessibility text for the search button inside the Search input.",
     "message": "Search"
   },
+  "components.SearchInput.label": {
+    "description": "Accessibility text for the search input label.",
+    "message": "Search"
+  },
   "components.SearchSuggestField.searchFieldPlaceholder": {
     "description": "Placeholder text displayed in the search field when it is empty.",
     "message": "Search for courses, organizations, categories"
@@ -1611,6 +1631,10 @@
     "description": "Course date of an opened course run block",
     "message": "From {startDate} {endDate, select, undefined {} other {to {endDate}}}"
   },
+  "components.SyllabusCourseRun.enrollNow": {
+    "description": "CTA for users to enroll on ongoing of future open course.",
+    "message": "Enroll now"
+  },
   "components.SyllabusCourseRun.enrollment": {
     "description": "Title of the enrollment dates section of an opened course run block",
     "message": "Enrollment"
@@ -1623,10 +1647,18 @@
     "description": "Title of the languages section of an opened course run block",
     "message": "Languages"
   },
+  "components.SyllabusCourseRun.studyNow": {
+    "description": "CTA for users to enroll on archived course.",
+    "message": "Study now"
+  },
   "components.SyllabusCourseRunCompacted.course": {
     "description": "Title of the course dates section of an opened course run block",
     "message": "Course"
   },
+  "components.SyllabusCourseRunCompacted.enrollNow": {
+    "description": "CTA for users to enroll on ongoing of future open course.",
+    "message": "Enroll now"
+  },
   "components.SyllabusCourseRunCompacted.languages": {
     "description": "Title of the languages section of an opened course run block",
     "message": "Languages"
@@ -1639,6 +1671,10 @@
     "description": "Self paced course run block with no end date",
     "message": "Available"
   },
+  "components.SyllabusCourseRunCompacted.studyNow": {
+    "description": "CTA for users to enroll on archived course.",
+    "message": "Study now"
+  },
   "components.SyllabusCourseRunsList.multipleOpenedCourseRuns": {
     "description": "Message displayed when there are multiple opened course runs on a syllabus",
     "message": "{count} course runs are currently open for this course"
@@ -1955,6 +1991,10 @@
     "description": "Error message shown to the user when course fetch request fails.",
     "message": "An error occurred while fetching course. Please retry later."
   },
+  "hooks.useCreditCards.errorCannotDelete": {
+    "description": "Error message shown to the user when trying to delete a credit card that is used to pay at least order.",
+    "message": "Cannot delete the credit card •••• •••• •••• {last_numbers} because it is used to pay at least one of your order."
+  },
   "hooks.useCreditCards.errorDelete": {
     "description": "Error message shown to the user when credit card deletion request fails.",
     "message": "An error occurred while deleting the credit card. Please retry later."
@@ -1963,6 +2003,10 @@
     "description": "Error message shown to the user when no credit cards matches.",
     "message": "Cannot find the credit card"
   },
+  "hooks.useCreditCards.errorPromote": {
+    "description": "Error message shown to the user when promoting a credit card fails.",
+    "message": "Cannot set the credit card as default"
+  },
   "hooks.useCreditCards.errorSelect": {
     "description": "Error message shown to the user when credit cards fetch request fails.",
     "message": "An error occurred while fetching credit cards. Please retry later."
@@ -1979,10 +2023,6 @@
     "description": "Confirmation message shown to the user when he wants to delete a credit card",
     "message": "Are you sure you want to delete the credit card? ⚠️ You cannot undo this change after."
   },
-  "hooks.useCreditCardsManagement.errorCannotRemoveMain": {
-    "description": "Error shown if a user tries to delete a main credit card",
-    "message": "Cannot remove main credit card."
-  },
   "hooks.useDashboardAddressForm.isMainInputLabel": {
     "description": "Label of the \"is_main\" input",
     "message": "Use this address as default"

package/js/api/joanie.ts

@@ -83,6 +83,7 @@ export const getRoutes = () => {
         update: `${baseUrl}/credit-cards/:id/`,
         delete: `${baseUrl}/credit-cards/:id/`,
         tokenize: `${baseUrl}/credit-cards/tokenize-card/`,
+        promote: `${baseUrl}/credit-cards/:id/promote/`,
       },
       addresses: {
         get: `${baseUrl}/addresses/:id/`,
@@ -242,6 +243,10 @@ const API = (): Joanie.API => {
           }).then(checkStatus),
         tokenize: async () =>
           fetchWithJWT(ROUTES.user.creditCards.tokenize, { method: 'POST' }).then(checkStatus),
+        promote: async (id) =>
+          fetchWithJWT(ROUTES.user.creditCards.promote.replace(':id', id), {
+            method: 'PATCH',
+          }).then(checkStatus),
       },
       addresses: {
         get: (id?: string) => {

package/js/api/lms/dummy.ts

@@ -25,24 +25,26 @@ type JWTPayload = {
   username: string;
 };
 
-/* All JWT tokens will expire the 12 Dec 2024 ! */
+/* All JWT tokens will expire the 02 Feb 2026 ! */
 const JOANIE_DEV_DEMO_USER_JWT_TOKENS = {
-  admin:
-    'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzNjU1MjMsImp0aSI6IjRhMzQxZWVmMmVhOTRkNGFiMzQ5OThkOWE4ZDM5MTI0IiwiZW1haWwiOiJhZG1pbkBleGFtcGxlLmNvbSIsImxhbmd1YWdlIjoiZW4tdXMiLCJ1c2VybmFtZSI6ImFkbWluIiwiZnVsbF9uYW1lIjoiIn0.rT8nymp8f4T7tIIXO-M5-ahXBwxoDNVqtaZIrb_GHuk',
   user0:
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6Ijc2ZDNlNmU2NGYwMzQ4NTg5NTNiOWIxNWIwNDhhNjI0IiwiZW1haWwiOiJjc3RlcGhlbnNvbkBleGFtcGxlLm9yZyIsImxhbmd1YWdlIjoiZnItZnIiLCJ1c2VybmFtZSI6InVzZXIwIiwiZnVsbF9uYW1lIjoiT3RoZXIgT3duZXIifQ.JQRHKdr3Utl9rw-BQyvM8zXsY16CSgscEh9NAaP2INc',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6ImQwZmU1Zjg5ZjFhYTQ4YmM5NDhmNWU4ODFkNTNhNTU2IiwiZW1haWwiOiJwc21pdGhAZXhhbXBsZS5vcmciLCJsYW5ndWFnZSI6ImVuLXVzIiwidXNlcm5hbWUiOiJ1c2VyMCIsImZ1bGxfbmFtZSI6Ik90aGVyIE93bmVyIn0.eCawfaCzpO7U7iUPC1TE_XYDiRjq_crI93GqE8Fj8zc',
   user1:
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6IjY3NDBmYzFlOTlhNDQwNzBhN2I1NWNkMTE0M2UzNThhIiwiZW1haWwiOiJuYW5jeTgzQGV4YW1wbGUuY29tIiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoidXNlcjEiLCJmdWxsX25hbWUiOiJPdGhlciBPd25lciJ9.mWtt4zKA-SiSQG2Pfrauq9ZYzSCq53qPa0jjdGaqFWQ',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6ImIwYjk3YjZkZjFlMzRkMTg4NjFiMGFhMjcxYWI0YWU1IiwiZW1haWwiOiJzYW1wc29uYW5uYUBleGFtcGxlLm9yZyIsImxhbmd1YWdlIjoiZW4tdXMiLCJ1c2VybmFtZSI6InVzZXIxIiwiZnVsbF9uYW1lIjoiT3RoZXIgT3duZXIifQ.yd46_63iuw19zmzH8aVNRAVAvAE4VGH8W8BjmFs6PPU',
   user2:
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6IjBhNjkwY2QyZjA5ZTRjMWU4MTE4MzhmNGI0YjEzNGMyIiwiZW1haWwiOiJwYXVsYnJhbmRvbkBleGFtcGxlLm9yZyIsImxhbmd1YWdlIjoiZnItZnIiLCJ1c2VybmFtZSI6InVzZXIyIiwiZnVsbF9uYW1lIjoiT3RoZXIgT3duZXIifQ.EXUlkR-0IIj8xRRnlf9TWyVa8Gh_jPE7aNIu18BI83Q',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6ImNmYzY2OTNmY2Q5ZTRlZGViM2Y2NzU1MTZhNDIzMTdiIiwiZW1haWwiOiJsb3BlemFtYmVyQGV4YW1wbGUub3JnIiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoidXNlcjIiLCJmdWxsX25hbWUiOiJPdGhlciBPd25lciJ9.TlFILOXY-wK29M_BUgDKgjdOovSfEIlw5cNXed6ZV3w',
   user3:
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6IjQ5N2IyMTEzYjQ4MjQ2YWNhOWUyMWIyMmZmZGJkYWU5IiwiZW1haWwiOiJqZXNzaWNhNDFAZXhhbXBsZS5jb20iLCJsYW5ndWFnZSI6ImVuLXVzIiwidXNlcm5hbWUiOiJ1c2VyMyIsImZ1bGxfbmFtZSI6Ik90aGVyIE93bmVyIn0.MXEFrvlkxPxlCpS172ls4eNvbV6vEDBJK1T3PHS9CoY',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6IjA4ZTcxZGJjYWIyMDRjMmZhZjgyMDVjZTRiNTliMjZiIiwiZW1haWwiOiJsb25nZWxpemFiZXRoQGV4YW1wbGUub3JnIiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoidXNlcjMiLCJmdWxsX25hbWUiOiJPdGhlciBPd25lciJ9.8NxYyjc567lO2Yc7me-TQr8PNvKqB5VLRzHd1Z4vA4U',
   user4:
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6ImMyYTBmMGU0NTI5MTRmNWFhZDdiYTE1YWQ3ZTQ5MjgwIiwiZW1haWwiOiJkb25uYTE5QGV4YW1wbGUubmV0IiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoidXNlcjQiLCJmdWxsX25hbWUiOiJPdGhlciBPd25lciJ9.sVmYGo2LO8I1Sz2hP8wRk8yd0n1bOcWsyFG0ZXi5SbE',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6ImVmZGRkM2Q0YTdmZDQ4ZmFhYmZkM2Q2OTI4YzMwM2U4IiwiZW1haWwiOiJqb25lc2plbm5pZmVyQGV4YW1wbGUub3JnIiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoidXNlcjQiLCJmdWxsX25hbWUiOiJPdGhlciBPd25lciJ9.Wn5CKuNPn0s4B_76Mxd3zTKqdUMaZGV456bhZ-fDe-o',
   organization_owner:
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6IjYxNTZiYmNmMjZmMzQzYTBiYTgzM2ZmYzU1M2U1NjBlIiwiZW1haWwiOiJqZWFuLWJhcHRpc3RlLnBlbnJhdGgrb3JnYW5pemF0aW9uX293bmVyQGZ1bi1tb29jLmZyIiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoib3JnYW5pemF0aW9uX293bmVyIiwiZnVsbF9uYW1lIjoiT3JnYSBPd25lciBPd25lciJ9.wkdYFBasBIk4U-Vr7SdnkfgoqAlhn7rmr0Bqcs777_w',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6ImRiYmU2ZGExZjhmNDQzNDA4N2U2NzQ0YTIzM2JmNjFiIiwiZW1haWwiOiJkZXZlbG9wZXIrb3JnYW5pemF0aW9uX293bmVyQGV4YW1wbGUuY29tIiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoib3JnYW5pemF0aW9uX293bmVyIiwiZnVsbF9uYW1lIjoiT3JnYSBPd25lciJ9.a6QjOAOxCw7ZFKvg8OCcUaW8Xhbmfuqy3cwIqUCPfzE',
   student_user:
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6ImNkZjAyMGM4ODdjOTQxYzU5ZmExN2FkZGExNjNjMDIzIiwiZW1haWwiOiJqZWFuLWJhcHRpc3RlLnBlbnJhdGgrc3R1ZGVudF91c2VyQGZ1bi1tb29jLmZyIiwibGFuZ3VhZ2UiOiJmci1mciIsInVzZXJuYW1lIjoic3R1ZGVudF91c2VyIiwiZnVsbF9uYW1lIjoiXHUwMGM5dHVkaWFudCJ9.JMdnC2VXwq2VbNPrIYxj8PEq0oJJ4LZZT_ywWyE1lBM',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6IjNhMGExYjM0OWEwNDQxNTg5ODU4NGUwZjMwNTc5M2EwIiwiZW1haWwiOiJkZXZlbG9wZXIrc3R1ZGVudF91c2VyQGV4YW1wbGUuY29tIiwibGFuZ3VhZ2UiOiJmci1mciIsInVzZXJuYW1lIjoic3R1ZGVudF91c2VyIiwiZnVsbF9uYW1lIjoiXHUwMGM5dHVkaWFudCJ9.3VvjPXwtuNA684hSIem3X2uFD-4WH8fipVDXMsi1cAc',
+  second_student_user:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6Ijg5ZDIyNDJjODRkODRiNThiZWVkYjg1NmU2MGNiM2FiIiwiZW1haWwiOiJkZXZlbG9wZXIrc2Vjb25kX3N0dWRlbnRfdXNlckBleGFtcGxlLmNvbSIsImxhbmd1YWdlIjoiZnItZnIiLCJ1c2VybmFtZSI6InNlY29uZF9zdHVkZW50X3VzZXIiLCJmdWxsX25hbWUiOiJcdTAwYzl0dWRpYW50IDAwMiJ9.p5p4Ku0w8mHortWW9TYHTJgORF9wnfCpq-6pvBRjU0Y',
+  admin:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6Ijk4M2UzNmI5MTUzODQ2Mjg4ZGMxNWNjOTAwNDgwMDA4IiwiZW1haWwiOiJhZG1pbkBleGFtcGxlLmNvbSIsImxhbmd1YWdlIjoiZW4tdXMiLCJ1c2VybmFtZSI6ImFkbWluIiwiZnVsbF9uYW1lIjoiIn0.VuSqfh4l0vtIDSdkEgCNyciiOhlFlMAsf5u5snm2Avw',
 };
 
 export type DevDemoUser = keyof typeof JOANIE_DEV_DEMO_USER_JWT_TOKENS;

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

@@ -6,7 +6,7 @@ import fetchMock from 'fetch-mock';
 import { IntlProvider } from 'react-intl';
 import countries from 'i18n-iso-countries';
 import { QueryClientProvider } from '@tanstack/react-query';
-import { PropsWithChildren } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { CunninghamProvider } from '@openfun/cunningham-react';
 import userEvent, { UserEvent } from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';

package/js/components/AddressesManagement/index.tsx

@@ -1,4 +1,4 @@
-import { Children, forwardRef, useEffect, useState } from 'react';
+import { Children, useEffect, useState, RefAttributes } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Button } from '@openfun/cunningham-react';
 import AddressForm, { type AddressFormValues } from 'components/AddressesManagement/AddressForm';
@@ -7,7 +7,6 @@ import { Icon, IconTypeEnum } from 'components/Icon';
 import RegisteredAddress from 'components/RegisteredAddress';
 import { useAddressesManagement } from 'hooks/useAddressesManagement';
 import type * as Joanie from 'types/Joanie';
-import { Address } from 'types/Joanie';
 import { Maybe } from 'types/utils';
 
 // constant used as `address.id` for local address
@@ -106,147 +105,142 @@ export const messages = defineMessages({
   },
 });
 
-interface AddressesManagementProps {
+interface AddressesManagementProps extends RefAttributes<HTMLDivElement> {
   handleClose: () => void;
   selectAddress: (address: Joanie.Address) => void;
 }
 
-const AddressesManagement = forwardRef<HTMLDivElement, AddressesManagementProps>(
-  ({ handleClose, selectAddress }, ref) => {
-    const intl = useIntl();
-    const [editedAddress, setEditedAddress] = useState<Maybe<Joanie.Address>>();
-    const {
-      methods: { setError, create, update, remove, promote },
-      states: { error },
-      ...addresses
-    } = useAddressesManagement();
+const AddressesManagement = ({ handleClose, selectAddress, ref }: AddressesManagementProps) => {
+  const intl = useIntl();
+  const [editedAddress, setEditedAddress] = useState<Maybe<Joanie.Address>>();
+  const {
+    methods: { setError, create, update, remove, promote },
+    states: { error },
+    ...addresses
+  } = useAddressesManagement();
 
-    /**
-     * Sort addresses ascending by title according to the locale
-     *
-     * @param {Joanie.Address} a
-     * @param {Joanie.Address} b
-     * @returns {Joanie.Address[]} Sorted addresses ascending by title
-     */
-    const sortAddressByTitleAsc = (a: Joanie.Address, b: Joanie.Address) => {
-      return a.title.localeCompare(b.title, [intl.locale, intl.defaultLocale]);
-    };
+  /**
+   * Sort addresses ascending by title according to the locale
+   *
+   * @param {Joanie.Address} a
+   * @param {Joanie.Address} b
+   * @returns {Joanie.Address[]} Sorted addresses ascending by title
+   */
+  const sortAddressByTitleAsc = (a: Joanie.Address, b: Joanie.Address) => {
+    return a.title.localeCompare(b.title, [intl.locale, intl.defaultLocale]);
+  };
 
-    /**
-     * update `selectedAddress` state with the address provided
-     * then close the address management form
-     *
-     * @param {Joanie.Address} address
-     */
-    const handleSelect = (address: Joanie.Address) => {
-      setError(undefined);
-      selectAddress(address);
-      handleClose();
-    };
+  /**
+   * update `selectedAddress` state with the address provided
+   * then close the address management form
+   *
+   * @param {Joanie.Address} address
+   */
+  const handleSelect = (address: Joanie.Address) => {
+    setError(undefined);
+    selectAddress(address);
+    handleClose();
+  };
 
-    /**
-     * Create a new address according to form values
-     * then update `selectedAddress` state with this new one.
-     * If `save` checkbox input is checked, the address is persisted
-     * otherwise it is only stored through the `selectedAddress` state.
-     *
-     * @param {AddressFormValues} formValues address fields to update
-     */
-    const handleCreate = async ({ save, ...address }: AddressFormValues) => {
-      if (save) {
-        await create(address, { onSuccess: handleSelect });
-      } else {
-        handleSelect({
-          id: LOCAL_BILLING_ADDRESS_ID,
-          is_main: false,
-          ...address,
-        });
-      }
-    };
+  /**
+   * Create a new address according to form values
+   * then update `selectedAddress` state with this new one.
+   * If `save` checkbox input is checked, the address is persisted
+   * otherwise it is only stored through the `selectedAddress` state.
+   *
+   * @param {AddressFormValues} formValues address fields to update
+   */
+  const handleCreate = async ({ save, ...address }: AddressFormValues) => {
+    if (save) {
+      await create(address, { onSuccess: handleSelect });
+    } else {
+      handleSelect({
+        id: LOCAL_BILLING_ADDRESS_ID,
+        is_main: false,
+        ...address,
+      });
+    }
+  };
 
-    /**
-     * Update the `editedAddress` with new values provided as argument
-     * then clear `editedAddress` state if request succeeded.
-     *
-     * @param {AddressFormValues} formValues address fields to update
-     */
-    const handleUpdate = async ({ save, ...newAddress }: AddressFormValues) => {
-      update(
-        {
-          ...editedAddress!,
-          ...newAddress,
-        },
-        {
-          onSuccess: () => setEditedAddress(undefined),
-        },
-      );
-    };
+  /**
+   * Update the `editedAddress` with new values provided as argument
+   * then clear `editedAddress` state if request succeeded.
+   *
+   * @param {AddressFormValues} formValues address fields to update
+   */
+  const handleUpdate = async ({ save, ...newAddress }: AddressFormValues) => {
+    update(
+      {
+        ...editedAddress!,
+        ...newAddress,
+      },
+      {
+        onSuccess: () => setEditedAddress(undefined),
+      },
+    );
+  };
 
-    useEffect(() => {
-      setError(undefined);
-      if (editedAddress) {
-        document.querySelector<HTMLElement>('[name="address-form"] input')?.focus();
-      }
-    }, [editedAddress]);
+  useEffect(() => {
+    setError(undefined);
+    if (editedAddress) {
+      document.querySelector<HTMLElement>('[name="address-form"] input')?.focus();
+    }
+  }, [editedAddress]);
 
-    return (
-      <div className="AddressesManagement" ref={ref}>
-        <Button
-          className="AddressesManagement__closeButton"
-          color="tertiary"
-          size="small"
-          onClick={handleClose}
-        >
-          <Icon name={IconTypeEnum.CHEVRON_LEFT_OUTLINE} className="button__icon" />
-          <FormattedMessage {...messages.closeButton} />
-        </Button>
-        {error && <Banner message={error} type={BannerType.ERROR} rounded />}
-        {addresses.items.length > 0 ? (
-          <section className="address-registered">
-            <header>
-              <h2 className="h5">
-                <FormattedMessage {...messages.registeredAddresses} />
-              </h2>
-            </header>
-            <ul className="registered-addresses-list">
-              {Children.toArray(
-                addresses.items
-                  .sort(sortAddressByTitleAsc)
-                  .map((address) => (
-                    <RegisteredAddress
-                      address={address}
-                      edit={setEditedAddress}
-                      promote={promote}
-                      remove={remove}
-                      select={handleSelect}
-                    />
-                  )),
-              )}
-            </ul>
-          </section>
-        ) : null}
-        <section className={`address-form ${editedAddress ? 'address-form--highlighted' : ''}`}>
+  return (
+    <div className="AddressesManagement" ref={ref}>
+      <Button
+        className="AddressesManagement__closeButton"
+        color="tertiary"
+        size="small"
+        onClick={handleClose}
+      >
+        <Icon name={IconTypeEnum.CHEVRON_LEFT_OUTLINE} className="button__icon" />
+        <FormattedMessage {...messages.closeButton} />
+      </Button>
+      {error && <Banner message={error} type={BannerType.ERROR} rounded />}
+      {addresses.items.length > 0 ? (
+        <section className="address-registered">
           <header>
             <h2 className="h5">
-              {editedAddress ? (
-                <FormattedMessage
-                  {...messages.editAddress}
-                  values={{ title: editedAddress.title }}
-                />
-              ) : (
-                <FormattedMessage {...messages.addAddress} />
-              )}
+              <FormattedMessage {...messages.registeredAddresses} />
             </h2>
           </header>
-          <AddressForm
-            address={editedAddress}
-            handleReset={() => setEditedAddress(undefined)}
-            onSubmit={editedAddress ? handleUpdate : handleCreate}
-          />
+          <ul className="registered-addresses-list">
+            {Children.toArray(
+              addresses.items
+                .sort(sortAddressByTitleAsc)
+                .map((address) => (
+                  <RegisteredAddress
+                    address={address}
+                    edit={setEditedAddress}
+                    promote={promote}
+                    remove={remove}
+                    select={handleSelect}
+                  />
+                )),
+            )}
+          </ul>
         </section>
-      </div>
-    );
-  },
-);
+      ) : null}
+      <section className={`address-form ${editedAddress ? 'address-form--highlighted' : ''}`}>
+        <header>
+          <h2 className="h5">
+            {editedAddress ? (
+              <FormattedMessage {...messages.editAddress} values={{ title: editedAddress.title }} />
+            ) : (
+              <FormattedMessage {...messages.addAddress} />
+            )}
+          </h2>
+        </header>
+        <AddressForm
+          address={editedAddress}
+          handleReset={() => setEditedAddress(undefined)}
+          onSubmit={editedAddress ? handleUpdate : handleCreate}
+        />
+      </section>
+    </div>
+  );
+};
 
 export default AddressesManagement;

package/js/components/ContractFrame/AbstractContractFrame.tsx

@@ -134,7 +134,7 @@ const ContractFrameContent = ({
   const [signatureType, setSignatureType] = useState<SignatureType>();
   const [invitationLink, setInvitationLink] = useState<Maybe<string>>();
   const [error, setError] = useState<Maybe<string>>();
-  const timeoutRef = useRef<NodeJS.Timeout>();
+  const timeoutRef = useRef<NodeJS.Timeout>(undefined);
 
   const setErrored = (e: string) => {
     setStep(ContractSteps.ERROR);

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

@@ -29,7 +29,7 @@ type IconContainerProps = {
 };
 const IconContainer = ({ name, enumKey }: IconContainerProps) => {
   const [showTooltip, setShowTooltip] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout>();
+  const timeoutRef = useRef<NodeJS.Timeout>(undefined);
   const ENUM_NAME = 'IconTypeEnum';
 
   const styleContainer: CSSProperties = {

package/js/components/PaymentInterfaces/PayplugLightbox.tsx

@@ -17,7 +17,7 @@ const PayplugLightbox = ({
   onError,
   ...props
 }: PaymentInterfaceProps<PayplugPayment>) => {
-  const ref = useRef<ReturnType<typeof setTimeout>>();
+  const ref = useRef<ReturnType<typeof setTimeout>>(undefined);
 
   /** type guard to check if the payment is a payment one click */
   const isPaidPayment = (p: PayplugPayment) => p?.is_paid === true;

package/js/components/PaymentScheduleGrid/_styles.scss

@@ -22,9 +22,10 @@
   font-weight: var(--c--theme--font--weight--semibold);
   font-size: rem-calc(12px);
 
-  &--incoming {
-    background-color: var(--c--theme--colors--grey87);
-    color: var(--c--theme--colors--charcoal);
+  &--canceled,
+  &--refunded {
+    color: var(--c--theme--colors--white);
+    background-color: var(--c--theme--colors--grey59);
   }
 
   &--paid {
@@ -37,8 +38,8 @@
     color: var(--c--theme--colors--white);
   }
 
-  &--require_payment,
-  &--failed {
+  &--refused,
+  &--error {
     background-color: var(--c--theme--colors--firebrick6);
     color: var(--c--theme--colors--white);
   }

package/js/components/PaymentScheduleGrid/index.tsx

@@ -22,6 +22,12 @@ export const stateMessages = defineMessages({
     defaultMessage: 'Pending',
     description: 'Label displayed for pending payment state',
   },
+  [PaymentScheduleState.ERROR]: {
+    id: 'components.PaymentScheduleGrid.state.error',
+    defaultMessage: 'Pending',
+    description:
+      'Label displayed for error payment state. For learner we assume to display `pending`.',
+  },
   [PaymentScheduleState.PAID]: {
     id: 'components.PaymentScheduleGrid.state.paid',
     defaultMessage: 'Paid',
@@ -32,6 +38,16 @@ export const stateMessages = defineMessages({
     defaultMessage: 'Refused',
     description: 'Label displayed for refused payment state',
   },
+  [PaymentScheduleState.CANCELED]: {
+    id: 'components.PaymentScheduleGrid.state.canceled',
+    defaultMessage: 'Canceled',
+    description: 'Label displayed for canceled payment state',
+  },
+  [PaymentScheduleState.REFUNDED]: {
+    id: 'components.PaymentScheduleGrid.state.refunded',
+    defaultMessage: 'Refunded',
+    description: 'Label displayed for refunded payment state',
+  },
 });
 
 export const PaymentScheduleGrid = ({ schedule }: Props) => {

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

@@ -47,7 +47,7 @@ const messages = defineMessages({
 });
 
 const SaleTunnelSavePaymentMethod = () => {
-  const initialCreditCards = useRef<CreditCard[]>();
+  const initialCreditCards = useRef<CreditCard[]>([]);
   const [shouldPoll, setShouldPoll] = useState(false);
   const [payment, setPayment] = useState<Payment>();
   const [error, setError] = useState<string>();
@@ -71,7 +71,7 @@ const SaleTunnelSavePaymentMethod = () => {
   };
 
   const waitForNewCreditCard = () => {
-    const initialIds = initialCreditCards.current!.map((cc) => cc.id);
+    const initialIds = initialCreditCards.current.map((cc) => cc.id);
     const newCard = creditCardsQuery.items.find((cc) => !initialIds.includes(cc.id));
 
     if (!newCard) return;

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

@@ -10,14 +10,15 @@ describe('<SearchInput />', () => {
 
   const inputProps = {};
 
-  it('renders with the input field and button', () => {
-    const { container, getByText } = render(
+  it('renders with the input field, label and button', () => {
+    const { container, getByRole, getByLabelText } = render(
       <IntlProvider locale="en">
         <SearchInput context={contextProps} inputProps={inputProps} />
       </IntlProvider>,
     );
 
-    getByText('Search');
+    getByRole('button', { name: 'Search' });
+    getByLabelText('Search');
     // NB: we're searching the DOM as labelling and a11y for this input are handled by `react-autosuggest`
     expect(container.querySelector('input')).not.toBeNull();
     expect(container.innerHTML).toContain('icon-magnifying-glass');
@@ -26,13 +27,13 @@ describe('<SearchInput />', () => {
   it('triggers the passed callback on click', () => {
     const callback = jest.fn();
 
-    const { getByText } = render(
+    const { getByRole } = render(
       <IntlProvider locale="en">
         <SearchInput context={contextProps} inputProps={inputProps} onClick={callback} />
       </IntlProvider>,
     );
 
-    fireEvent.click(getByText('Search'));
+    fireEvent.click(getByRole('button', { name: 'Search' }));
     expect(callback).toHaveBeenCalledTimes(1);
   });
 });