♻️(frontend) use Form

use new Form component were form classes were used
openfun · Mar 21, 2024 · 8c694f0 · 8c694f0
1 parent 4bb234e
commit 8c694f0
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 40 deletions.
diff --git a/src/frontend/js/components/AddressesManagement/AddressForm/index.tsx b/src/frontend/js/components/AddressesManagement/AddressForm/index.tsx
@@ -10,6 +10,7 @@ import Input from 'components/Form/Input';
 import { useAddresses } from 'hooks/useAddresses';
 import type { Address } from 'types/Joanie';
 import { messages as formMessages } from 'components/Form/messages';
+import Form from 'components/Form';
 import validationSchema from './validationSchema';
 
 export interface AddressFormValues extends Omit<Address, 'id' | 'is_main'> {
@@ -60,20 +61,20 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
 
   return (
     <FormProvider {...form}>
-      <form className="form" name="address-form" onSubmit={handleSubmit(onSubmit)} noValidate>
+      <Form name="address-form" onSubmit={handleSubmit(onSubmit)} noValidate>
         <p className="form__required-fields-note">
           <FormattedMessage {...formMessages.formOptionalFieldsText} />
         </p>
-        <div className="form-row">
+        <Form.Row>
           <Input
             className="form-field"
             required
             fullWidth
             name="title"
             label={intl.formatMessage(messages.titleInputLabel)}
           />
-        </div>
-        <div className="form-row">
+        </Form.Row>
+        <Form.Row>
           <Input
             className="form-field"
             required
@@ -86,16 +87,16 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
             name="last_name"
             label={intl.formatMessage(messages.last_nameInputLabel)}
           />
-        </div>
-        <div className="form-row">
+        </Form.Row>
+        <Form.Row>
           <Input
             required
             fullWidth
             name="address"
             label={intl.formatMessage(messages.addressInputLabel)}
           />
-        </div>
-        <div className="form-row">
+        </Form.Row>
+        <Form.Row>
           <Input
             className="form-field"
             required
@@ -109,17 +110,17 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
             name="city"
             label={intl.formatMessage(messages.cityInputLabel)}
           />
-        </div>
-        <div className="form-row">
+        </Form.Row>
+        <Form.Row>
           <CountrySelectField
             name="country"
             label={intl.formatMessage(messages.countryInputLabel)}
             state={formState.errors.country ? 'error' : 'default'}
           />
-        </div>
+        </Form.Row>
 
         {!address ? (
-          <div className="form-row">
+          <Form.Row>
             <Checkbox
               aria-invalid={!!formState.errors?.save}
               id="save"
@@ -132,7 +133,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
               )}
               {...register('save')}
             />
-          </div>
+          </Form.Row>
         ) : null}
 
         <footer className="form__footer">
@@ -155,7 +156,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
             </Button>
           )}
         </footer>
-      </form>
+      </Form>
     </FormProvider>
   );
 };

diff --git a/src/frontend/js/components/Form/Form/_styles.scss b/src/frontend/js/components/Form/Form/_styles.scss
@@ -1,12 +1,11 @@
-//
-// Form objects
-//
-
 // Example of a form class structure:
 // .form
 //  .form-row
 //    .c__field ( should be form-field when cunningham is improved)
 .form {
+  $vertical-spacing: rem-calc(10px);
+  $horizontal-spacing: rem-calc(16px);
+
   .c__field {
     width: auto;
     display: flex;
@@ -16,8 +15,8 @@
   &-row {
     display: flex;
     flex-direction: row;
-    gap: rem-calc(16px);
-    margin-bottom: rem-calc(10px);
+    gap: $horizontal-spacing;
+    margin-bottom: $vertical-spacing;
     &:last-child {
       margin-bottom: 0;
     }

diff --git a/src/frontend/js/hooks/useDashboardAddressForm.tsx b/src/frontend/js/hooks/useDashboardAddressForm.tsx
@@ -11,6 +11,7 @@ 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 Form from 'components/Form';
 
 const messages = defineMessages({
   isMainInputLabel: {
@@ -64,19 +65,19 @@ export const useDashboardAddressForm = (address?: Address) => {
 
   const FormView = (
     <FormProvider {...form}>
-      <form className="form" noValidate>
+      <Form noValidate>
         <p className="form__required-fields-note">
           <FormattedMessage {...formMessages.formOptionalFieldsText} />
         </p>
-        <div className="form-row">
+        <Form.Row>
           <Input
             required
             fullWidth
             name="title"
             label={intl.formatMessage(managementMessages.titleInputLabel)}
           />
-        </div>
-        <div className="form-row">
+        </Form.Row>
+        <Form.Row>
           <Input
             className="form-field"
             required
@@ -90,17 +91,17 @@ export const useDashboardAddressForm = (address?: Address) => {
             name="last_name"
             label={intl.formatMessage(managementMessages.last_nameInputLabel)}
           />
-        </div>
-        <div className="form-row">
+        </Form.Row>
+        <Form.Row>
           <Input
             required
             fullWidth
             name="address"
             label={intl.formatMessage(managementMessages.addressInputLabel)}
           />
-        </div>
+        </Form.Row>
 
-        <div className="form-row">
+        <Form.Row>
           <Input
             className="form-field"
             required
@@ -114,13 +115,13 @@ export const useDashboardAddressForm = (address?: Address) => {
             name="city"
             label={intl.formatMessage(managementMessages.cityInputLabel)}
           />
-        </div>
-        <div className="form-row">
+        </Form.Row>
+        <Form.Row>
           <CountrySelectField
             name="country"
             label={intl.formatMessage(managementMessages.countryInputLabel)}
           />
-        </div>
+        </Form.Row>
         {!(address && address.is_main) && (
           <Checkbox
             aria-invalid={!!formState.errors?.is_main}
@@ -135,7 +136,7 @@ export const useDashboardAddressForm = (address?: Address) => {
             {...register('is_main')}
           />
         )}
-      </form>
+      </Form>
     </FormProvider>
   );
 

diff --git a/src/frontend/js/pages/DashboardCreditCardsManagement/DashboardEditCreditCard.tsx b/src/frontend/js/pages/DashboardCreditCardsManagement/DashboardEditCreditCard.tsx
@@ -10,6 +10,7 @@ import { Spinner } from 'components/Spinner';
 import Banner, { BannerType } from 'components/Banner';
 import { useCreditCardsManagement } from 'hooks/useCreditCardsManagement';
 import { noop } from 'utils';
+import Form from 'components/Form';
 import { CreditCardBrandLogo } from './CreditCardBrandLogo';
 
 const messages = defineMessages({
@@ -116,11 +117,11 @@ export const DashboardEditCreditCard = ({ creditCard, onSettled = noop }: Props)
     }
     return (
       <FormProvider {...form}>
-        <form className="form" onSubmit={handleSubmit(onSubmit)} noValidate>
-          <div className="form-row">
+        <Form onSubmit={handleSubmit(onSubmit)} noValidate>
+          <Form.Row>
             <Input name="title" label={intl.formatMessage(messages.titleInputLabel)} />
-          </div>
-          <div className="form-row dashboard-edit-credit-card__sensitive">
+          </Form.Row>
+          <Form.Row className="dashboard-edit-credit-card__sensitive">
             <Input
               name="last_numbers"
               disabled={true}
@@ -135,9 +136,9 @@ export const DashboardEditCreditCard = ({ creditCard, onSettled = noop }: Props)
                 label={intl.formatMessage(messages.expirationInputLabel)}
               />
             </div>
-          </div>
+          </Form.Row>
           {!creditCard.is_main && (
-            <div className="form-row">
+            <Form.Row>
               <Checkbox
                 aria-invalid={!!formState.errors?.is_main}
                 id="is_main"
@@ -146,9 +147,9 @@ export const DashboardEditCreditCard = ({ creditCard, onSettled = noop }: Props)
                 {...getLocalizedCunninghamErrorProp(intl, formState.errors.is_main?.message)}
                 {...register('is_main')}
               />
-            </div>
+            </Form.Row>
           )}
-        </form>
+        </Form>
       </FormProvider>
     );
   };