richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/components/AddressesManagement/AddressForm/index.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { StorybookHelper } from 'utils/StorybookHelper';
+import { AddressFactory } from 'utils/test/factories/joanie';
+import AddressForm from '.';
+
+export default {
+  component: AddressForm,
+  parameters: {
+    docs: {
+      source: {
+        code: 'Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554',
+      },
+    },
+  },
+  render: (args) => {
+    return StorybookHelper.wrapInApp(
+      <div className="SaleTunnel__modal">
+        <div className="AddressesManagement" style={{ width: '600px' }}>
+          <div className="address-form">
+            <AddressForm {...args} />,
+          </div>
+        </div>
+      </div>,
+    );
+  },
+} as Meta<typeof AddressForm>;
+
+type Story = StoryObj<typeof AddressForm>;
+
+export const CreateAddress: Story = {};
+
+export const EditAddress: Story = {
+  args: {
+    address: AddressFactory().one(),
+  },
+};

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

@@ -0,0 +1,163 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Fragment, useEffect } from 'react';
+import { 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 { messages as formMessages } from 'components/Form/messages';
+import validationSchema from './validationSchema';
+
+export interface AddressFormValues extends Omit<Address, 'id' | 'is_main'> {
+  save?: boolean;
+}
+
+interface Props {
+  address?: Address;
+  onSubmit: (values: AddressFormValues) => Promise<void>;
+  handleReset: () => void;
+}
+
+const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
+  const defaultValues = {
+    title: '',
+    first_name: '',
+    last_name: '',
+    address: '',
+    postcode: '',
+    city: '',
+    country: '-',
+    save: false,
+  } as AddressFormValues;
+
+  const form = useForm<AddressFormValues>({
+    defaultValues: address || defaultValues,
+    mode: 'onBlur',
+    reValidateMode: 'onChange',
+    resolver: yupResolver(validationSchema),
+  });
+  const { register, handleSubmit, reset, formState } = form;
+
+  const addresses = useAddresses();
+  const intl = useIntl();
+
+  useEffect(() => {
+    reset(address);
+  }, [address]);
+
+  /**
+   * Prevent form to be submitted and clear `editedAddress` state.
+   */
+  const handleCancel = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+    event.preventDefault();
+    handleReset();
+    return false;
+  };
+
+  return (
+    <FormProvider {...form}>
+      <form className="form" name="address-form" onSubmit={handleSubmit(onSubmit)} noValidate>
+        <p className="form__required-fields-note">
+          <FormattedMessage {...formMessages.formOptionalFieldsText} />
+        </p>
+        <div className="form-row">
+          <Input
+            className="form-field"
+            required
+            fullWidth
+            name="title"
+            label={intl.formatMessage(messages.titleInputLabel)}
+          />
+        </div>
+        <div className="form-row">
+          <Input
+            className="form-field"
+            required
+            name="first_name"
+            label={intl.formatMessage(messages.first_nameInputLabel)}
+          />
+          <Input
+            className="form-field"
+            required
+            name="last_name"
+            label={intl.formatMessage(messages.last_nameInputLabel)}
+          />
+        </div>
+        <div className="form-row">
+          <Input
+            required
+            fullWidth
+            name="address"
+            label={intl.formatMessage(messages.addressInputLabel)}
+          />
+        </div>
+        <div className="form-row">
+          <Input
+            className="form-field"
+            required
+            name="postcode"
+            label={intl.formatMessage(messages.postcodeInputLabel)}
+          />
+
+          <Input
+            className="form-field"
+            required
+            name="city"
+            label={intl.formatMessage(messages.cityInputLabel)}
+          />
+        </div>
+        <div className="form-row">
+          <CountrySelectField
+            name="country"
+            label={intl.formatMessage(messages.countryInputLabel)}
+            state={formState.errors.country ? 'error' : 'default'}
+          />
+        </div>
+
+        {!address ? (
+          <div className="form-row">
+            <Checkbox
+              aria-invalid={!!formState.errors?.save}
+              id="save"
+              label={intl.formatMessage(messages.saveInputLabel)}
+              state={formState.errors?.save ? 'error' : 'default'}
+              {...getLocalizedCunninghamErrorProp(
+                intl,
+                formState.errors.save?.message,
+                intl.formatMessage(formMessages.optionalFieldText),
+              )}
+              {...register('save')}
+            />
+          </div>
+        ) : null}
+
+        <footer className="form__footer">
+          {address ? (
+            <Fragment>
+              <Button
+                color="tertiary"
+                onClick={handleCancel}
+                title={intl.formatMessage(messages.cancelTitleButton)}
+              >
+                <FormattedMessage {...messages.cancelButton} />
+              </Button>
+              <Button disabled={addresses.states.updating} type="submit">
+                <FormattedMessage {...messages.updateButton} />
+              </Button>
+            </Fragment>
+          ) : (
+            <Button disabled={addresses.states.creating || addresses.states.updating} type="submit">
+              <FormattedMessage {...messages.selectButton} />
+            </Button>
+          )}
+        </footer>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default AddressForm;

package/js/components/AddressesManagement/{validationSchema.ts → AddressForm/validationSchema.ts}

@@ -1,8 +1,6 @@
 import countries from 'i18n-iso-countries';
-import { IntlShape } from 'react-intl';
 import * as Yup from 'yup';
-import { ErrorKeys, errorMessages } from 'components/AddressesManagement/ValidationErrors';
-import { Maybe } from 'types/utils';
+import { ErrorKeys } from 'components/Form/ValidationErrors';
 
 Yup.setLocale({
   mixed: {
@@ -16,26 +14,6 @@ Yup.setLocale({
   },
 });
 
-export const getLocalizedErrorMessage = (
-  intl: IntlShape,
-  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);
-};
-
 // / ! \ If you need to edit the validation schema,
 // you should also add/edit error messages above.
 const schema = Yup.object().shape({

package/js/components/AddressesManagement/_styles.scss

@@ -7,7 +7,7 @@
     margin-bottom: 2rem;
   }
 
-  & > .button {
+  &__closeButton {
     margin-bottom: 0.5rem;
     margin-left: -1.5rem;
   }