♻️(frontend) address form using AddressGen

src/frontend/js/components/AddressesManagement/AddressForm/index.tsx

@@ -1,14 +1,14 @@
 import { yupResolver } from '@hookform/resolvers/yup';
 import { Fragment, useEffect } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { DefaultValues, FormProvider, useForm } from 'react-hook-form';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Button, Checkbox } from '@openfun/cunningham-react';
 import { getLocalizedCunninghamErrorProp } from 'components/Form/utils';
 import { messages } from 'components/AddressesManagement/index';
 import { CountrySelectField } from 'components/Form/CountrySelectField';
 import Input from 'components/Form/Input';
 import { useAddresses } from 'hooks/useAddresses';
-import type { Address } from 'types/Joanie';
+import type { Address } from 'api/joanie/gen';
 import { messages as formMessages } from 'components/Form/messages';
 import validationSchema from './validationSchema';
 
@@ -23,16 +23,7 @@ interface Props {
 }
 
 const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
-  const defaultValues = {
-    title: '',
-    first_name: '',
-    last_name: '',
-    address: '',
-    postcode: '',
-    city: '',
-    country: '-',
-    save: false,
-  } as AddressFormValues;
+  const defaultValues: DefaultValues<AddressFormValues> = {};
 
   const form = useForm<AddressFormValues>({
     defaultValues: address || defaultValues,

src/frontend/js/components/AddressesManagement/AddressForm/validationSchema.spec.ts

@@ -3,6 +3,7 @@ import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { act, renderHook } from '@testing-library/react';
 import { Maybe } from 'types/utils';
+import { CountryEnum } from 'api/joanie/gen';
 import validationSchema from './validationSchema';
 
 describe('validationSchema', () => {
@@ -11,7 +12,7 @@ describe('validationSchema', () => {
     const defaultValues = {
       address: faker.location.streetAddress(),
       city: faker.location.city(),
-      country: faker.location.countryCode(),
+      country: faker.location.countryCode() as CountryEnum,
       first_name: faker.person.firstName(),
       last_name: faker.person.lastName(),
       postcode: faker.location.zipCode(),
@@ -126,7 +127,7 @@ describe('validationSchema', () => {
       result.current.setValue('address', faker.location.streetAddress());
       result.current.setValue('city', faker.location.city());
       // set country value with an invalid country code
-      result.current.setValue('country', 'AA');
+      result.current.setValue('country', 'AA' as CountryEnum);
       result.current.setValue('first_name', faker.person.firstName());
       result.current.setValue('last_name', faker.person.lastName());
       result.current.setValue('postcode', faker.location.zipCode());
@@ -151,7 +152,7 @@ describe('validationSchema', () => {
 
     // - Set country value with a valid country code
     await act(async () => {
-      result.current.setValue('country', 'FR');
+      result.current.setValue('country', 'FR' as CountryEnum);
       result.current.trigger();
     });
 

src/frontend/js/components/AddressesManagement/AddressForm/validationSchema.ts

@@ -1,6 +1,6 @@
-import countries from 'i18n-iso-countries';
 import * as Yup from 'yup';
 import { ErrorKeys } from 'components/Form/ValidationErrors';
+import { CountryEnum } from 'api/joanie/gen';
 
 Yup.setLocale({
   mixed: {
@@ -19,7 +19,7 @@ Yup.setLocale({
 const schema = Yup.object().shape({
   address: Yup.string().required(),
   city: Yup.string().required(),
-  country: Yup.string().oneOf(Object.keys(countries.getAlpha2Codes())).required(),
+  country: Yup.mixed<CountryEnum>().oneOf(Object.values(CountryEnum)).defined(),
   first_name: Yup.string().required(),
   last_name: Yup.string().required(),
   postcode: Yup.string().required(),

src/frontend/js/components/Form/CountrySelectField.tsx

@@ -1,5 +1,6 @@
 import countries from 'i18n-iso-countries';
 import { defineMessages, useIntl } from 'react-intl';
+import { CountryEnum } from 'api/joanie/gen';
 import Select, { SelectProps } from './Select';
 
 export const messages = defineMessages({
@@ -19,7 +20,7 @@ export const CountrySelectField = ({
 
   const countryList = Object.entries(countries.getNames(languageCode)).map(
     ([value, label]: [string, string]) => {
-      return { value, label };
+      return { value: value as CountryEnum, label };
     },
     [],
   );

src/frontend/js/hooks/useAddressesManagement.tsx

@@ -1,8 +1,8 @@
 import { defineMessages, useIntl } from 'react-intl';
 import { MutateOptions } from '@tanstack/react-query';
 import { useAddresses } from 'hooks/useAddresses';
-import * as Joanie from 'types/Joanie';
 import { confirm } from 'utils/indirection/window';
+import { Address } from 'api/joanie/gen';
 
 const messages = defineMessages({
   errorCannotRemoveMain: {
@@ -40,7 +40,7 @@ export function useAddressesManagement() {
    *
    * @param {Joanie.Address} address
    */
-  const promote = (address: Joanie.Address) => {
+  const promote = (address: Address) => {
     if (address.is_main) {
       addresses.methods.setError(intl.formatMessage(messages.errorCannotPromoteMain));
       return;
@@ -58,7 +58,7 @@ export function useAddressesManagement() {
    * @param {Joanie.Address} address
    * @param {AddressesMutateOptions} options
    */
-  const remove = (address: Joanie.Address, options?: MutateOptions) => {
+  const remove = (address: Address, options?: MutateOptions) => {
     if (address.is_main) {
       addresses.methods.setError(intl.formatMessage(messages.errorCannotRemoveMain));
       return;

src/frontend/js/hooks/useDashboardAddressForm.tsx

@@ -1,16 +1,15 @@
 import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
-import { FormProvider, useForm } from 'react-hook-form';
+import { DefaultValues, FormProvider, useForm } from 'react-hook-form';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import * as Yup from 'yup';
-import countries from 'i18n-iso-countries';
 import { Checkbox } from '@openfun/cunningham-react';
 
 import { getLocalizedCunninghamErrorProp } from 'components/Form/utils';
 import { messages as managementMessages } from 'components/AddressesManagement';
 import { messages as formMessages } from 'components/Form/messages';
 import { CountrySelectField } from 'components/Form/CountrySelectField';
 import Input from 'components/Form/Input';
-import { Address } from 'types/Joanie';
+import { Address, CountryEnum } from 'api/joanie/gen';
 
 const messages = defineMessages({
   isMainInputLabel: {
@@ -25,15 +24,15 @@ const messages = defineMessages({
 const validationSchema = Yup.object().shape({
   address: Yup.string().required(),
   city: Yup.string().required(),
-  country: Yup.string().oneOf(Object.keys(countries.getAlpha2Codes())).required(),
+  country: Yup.mixed<CountryEnum>().oneOf(Object.values(CountryEnum)).defined(),
   first_name: Yup.string().required(),
   last_name: Yup.string().required(),
   postcode: Yup.string().required(),
   title: Yup.string().required().min(2),
-  is_main: Yup.boolean().required(),
+  is_main: Yup.boolean(),
 });
 
-export type AddressFormValues = Omit<Address, 'id'>;
+export type AddressFormValues = Omit<Address, 'id'> & {};
 
 /**
  * Hook to implement a form to edit or create an Address.
@@ -43,16 +42,9 @@ export type AddressFormValues = Omit<Address, 'id'>;
 export const useDashboardAddressForm = (address?: Address) => {
   const intl = useIntl();
 
-  const defaultValues = {
-    title: '',
-    first_name: '',
-    last_name: '',
-    address: '',
-    postcode: '',
-    city: '',
-    country: '-',
+  const defaultValues: DefaultValues<AddressFormValues> = {
     is_main: true,
-  } as AddressFormValues;
+  };
 
   const form = useForm<AddressFormValues>({
     defaultValues: address || defaultValues,

src/frontend/js/pages/DashboardAddressesManagement/index.tsx

@@ -6,7 +6,7 @@ import { DashboardCard } from 'widgets/Dashboard/components/DashboardCard';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { Spinner } from 'components/Spinner';
 import { useAddressesManagement } from 'hooks/useAddressesManagement';
-import { Address } from 'types/Joanie';
+import { Address } from 'api/joanie/gen';
 import { DashboardAddressBox } from './DashboardAddressBox';
 
 const messages = defineMessages({