diff --git a/src/frontend/js/components/AddressesManagement/AddressForm/index.tsx b/src/frontend/js/components/AddressesManagement/AddressForm/index.tsx index 87279b56b2..72fb97fa79 100644 --- a/src/frontend/js/components/AddressesManagement/AddressForm/index.tsx +++ b/src/frontend/js/components/AddressesManagement/AddressForm/index.tsx @@ -1,6 +1,6 @@ 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'; @@ -8,7 +8,7 @@ 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 = {}; const form = useForm({ defaultValues: address || defaultValues, diff --git a/src/frontend/js/components/AddressesManagement/AddressForm/validationSchema.spec.ts b/src/frontend/js/components/AddressesManagement/AddressForm/validationSchema.spec.ts index e92862a3c4..8fc91fd57a 100644 --- a/src/frontend/js/components/AddressesManagement/AddressForm/validationSchema.spec.ts +++ b/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(); }); diff --git a/src/frontend/js/components/AddressesManagement/AddressForm/validationSchema.ts b/src/frontend/js/components/AddressesManagement/AddressForm/validationSchema.ts index c45bbf6144..8cc58e7ffe 100644 --- a/src/frontend/js/components/AddressesManagement/AddressForm/validationSchema.ts +++ b/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().oneOf(Object.values(CountryEnum)).defined(), first_name: Yup.string().required(), last_name: Yup.string().required(), postcode: Yup.string().required(), diff --git a/src/frontend/js/components/Form/CountrySelectField.tsx b/src/frontend/js/components/Form/CountrySelectField.tsx index 1d2a9ab29b..d7d0958009 100644 --- a/src/frontend/js/components/Form/CountrySelectField.tsx +++ b/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 }; }, [], ); diff --git a/src/frontend/js/hooks/useAddressesManagement.tsx b/src/frontend/js/hooks/useAddressesManagement.tsx index 91a4785c0b..62ca41e28a 100644 --- a/src/frontend/js/hooks/useAddressesManagement.tsx +++ b/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; diff --git a/src/frontend/js/hooks/useDashboardAddressForm.tsx b/src/frontend/js/hooks/useDashboardAddressForm.tsx index 1a76b65ca1..994ea3197f 100644 --- a/src/frontend/js/hooks/useDashboardAddressForm.tsx +++ b/src/frontend/js/hooks/useDashboardAddressForm.tsx @@ -1,8 +1,7 @@ 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'; @@ -10,7 +9,7 @@ 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().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; +export type AddressFormValues = Omit & {}; /** * Hook to implement a form to edit or create an Address. @@ -43,16 +42,9 @@ export type AddressFormValues = Omit; export const useDashboardAddressForm = (address?: Address) => { const intl = useIntl(); - const defaultValues = { - title: '', - first_name: '', - last_name: '', - address: '', - postcode: '', - city: '', - country: '-', + const defaultValues: DefaultValues = { is_main: true, - } as AddressFormValues; + }; const form = useForm({ defaultValues: address || defaultValues, diff --git a/src/frontend/js/pages/DashboardAddressesManagement/index.tsx b/src/frontend/js/pages/DashboardAddressesManagement/index.tsx index 5241a60a81..77528a3a8a 100644 --- a/src/frontend/js/pages/DashboardAddressesManagement/index.tsx +++ b/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({