@palladium-ethiopia/esm-admin-app 5.4.2-pre.100

package/src/components/users/header/user-management-header.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Location, UserFollow } from '@carbon/react/icons';
+import { formatDate, useSession, ServiceQueuesPictogram } from '@openmrs/esm-framework';
+import styles from './header.scss';
+
+interface HeaderProps {
+  title: string;
+}
+
+const Header: React.FC<HeaderProps> = ({ title }) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const location = session?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header} id="admin-header">
+      <div className={styles.leftJustifiedItems}>
+        <ServiceQueuesPictogram />
+        <div className={styles.pageLabels}>
+          <p>{t('users', 'Users')}</p>
+          <p className={styles.pageName}>{title}</p>
+        </div>
+      </div>
+      <div className={styles.rightJustifiedItems}>
+        <div className={styles.userContainer}>
+          <p>{session?.user?.person?.display}</p>
+          <UserFollow size={16} className={styles.userIcon} />
+        </div>
+        <div className={styles.dateAndLocation}>
+          <Location size={16} />
+          <span className={styles.value}>{location}</span>
+          <span className={styles.middot}>&middot;</span>
+          <Calendar size={16} />
+          <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

package/src/components/users/manage-users/hooks/useProviderAttributeMapping.ts

@@ -0,0 +1,110 @@
+import { useCallback, useMemo } from 'react';
+import type { AttributeType } from '../../../../types';
+import type { ConfigObject } from '../../../../config-schema';
+import { extractProviderFormValues } from '../user-management.utils';
+
+export interface AttributeTypeMapping {
+  licenseNumber: string;
+  licenseExpiry: string;
+  providerNationalId: string;
+  qualification: string;
+  licenseBody: string;
+  phoneNumber: string;
+  providerAddress: string;
+  passportNumber: string;
+  providerUniqueIdentifier: string;
+}
+
+export interface ProviderValues {
+  providerLicenseNumber: string;
+  licenseExpiryDate: Date | string;
+  qualification: string;
+  nationalId: string;
+  passportNumber: string;
+  registrationNumber: string;
+  phoneNumber: string;
+  email: string;
+  providerUniqueIdentifier: string;
+}
+
+interface UseProviderAttributeMappingParams {
+  provider: Array<{ attributes?: Array<{ attributeType?: { uuid: string }; value?: string | { name?: string } }> }>;
+  providerAttributeType: AttributeType[];
+  config: Pick<
+    ConfigObject,
+    | 'licenseNumberUuid'
+    | 'licenseExpiryDateUuid'
+    | 'providerNationalIdUuid'
+    | 'qualificationUuid'
+    | 'licenseBodyUuid'
+    | 'phoneNumberUuid'
+    | 'providerAddressUuid'
+    | 'passportNumberUuid'
+    | 'providerUniqueIdentifierAttributeTypeUuid'
+  >;
+}
+
+export function useProviderAttributeMapping({
+  provider,
+  providerAttributeType,
+  config,
+}: UseProviderAttributeMappingParams) {
+  const attributeTypeMapping = useMemo<AttributeTypeMapping>(() => {
+    return {
+      licenseNumber: providerAttributeType.find((type) => type.uuid === config.licenseNumberUuid)?.uuid || '',
+      licenseExpiry: providerAttributeType.find((type) => type.uuid === config.licenseExpiryDateUuid)?.uuid || '',
+      providerNationalId: providerAttributeType.find((type) => type.uuid === config.providerNationalIdUuid)?.uuid || '',
+      qualification: providerAttributeType.find((type) => type.uuid === config.qualificationUuid)?.uuid || '',
+      licenseBody: providerAttributeType.find((type) => type.uuid === config.licenseBodyUuid)?.uuid || '',
+      phoneNumber: providerAttributeType.find((type) => type.uuid === config.phoneNumberUuid)?.uuid || '',
+      providerAddress: providerAttributeType.find((type) => type.uuid === config.providerAddressUuid)?.uuid || '',
+      passportNumber: providerAttributeType.find((type) => type.uuid === config.passportNumberUuid)?.uuid || '',
+      providerUniqueIdentifier:
+        providerAttributeType.find((type) => type.uuid === config.providerUniqueIdentifierAttributeTypeUuid)?.uuid ||
+        '',
+    };
+  }, [
+    providerAttributeType,
+    config.licenseNumberUuid,
+    config.licenseExpiryDateUuid,
+    config.providerNationalIdUuid,
+    config.qualificationUuid,
+    config.licenseBodyUuid,
+    config.phoneNumberUuid,
+    config.providerAddressUuid,
+    config.passportNumberUuid,
+    config.providerUniqueIdentifierAttributeTypeUuid,
+  ]);
+
+  const providerAttributes = useMemo(() => provider.flatMap((item) => item.attributes || []), [provider]);
+
+  const getProviderAttributeValue = useCallback(
+    (uuid: string, key: 'value' | 'display' = 'value') =>
+      providerAttributes.find((attr) => attr.attributeType?.uuid === uuid)?.[key],
+    [providerAttributes],
+  );
+
+  const providerValues = useMemo<ProviderValues>(() => {
+    const firstProvider = provider[0];
+    if (!firstProvider) {
+      return {
+        providerLicenseNumber: '',
+        licenseExpiryDate: '',
+        qualification: '',
+        nationalId: '',
+        passportNumber: '',
+        registrationNumber: '',
+        phoneNumber: '',
+        email: '',
+        providerUniqueIdentifier: '',
+      };
+    }
+    return extractProviderFormValues(firstProvider, attributeTypeMapping);
+  }, [provider, attributeTypeMapping]);
+
+  return {
+    attributeTypeMapping,
+    getProviderAttributeValue,
+    providerValues,
+  };
+}

package/src/components/users/manage-users/hooks/useUserFormSteps.ts

@@ -0,0 +1,119 @@
+import { useCallback, useMemo, useState } from 'react';
+import { ChevronLeft, ChevronRight } from '@carbon/react/icons';
+import type { TFunction } from 'i18next';
+import { SECTIONS } from '../../../../constants';
+import { FORM_STEP_IDS, FORM_STEP_KEYS } from '../user-management.constants';
+
+export interface FormStep {
+  id: string;
+  label: string;
+}
+
+interface UseUserFormStepsParams {
+  t: TFunction;
+  closeWorkspace: () => void;
+  isInitialValuesEmpty: boolean;
+  isStepValid: (stepIndex: number) => boolean;
+}
+
+export function useUserFormSteps({ t, closeWorkspace, isInitialValuesEmpty, isStepValid }: UseUserFormStepsParams) {
+  const [activeSection, setActiveSection] = useState(SECTIONS.DEMOGRAPHIC);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [completedStepIndex, setCompletedStepIndex] = useState(-1);
+
+  const steps = useMemo<FormStep[]>(
+    () =>
+      FORM_STEP_IDS.map((id) => ({
+        id,
+        label: t(FORM_STEP_KEYS[id].key, FORM_STEP_KEYS[id].fallback),
+      })),
+    [t],
+  );
+
+  const toggleSection = useCallback((section: string) => {
+    setActiveSection((prev) => (prev !== section ? section : prev));
+  }, []);
+
+  const hasLoginInfo = activeSection === SECTIONS.LOGIN;
+  const hasRoles = activeSection === SECTIONS.ROLES;
+  const hasDemographicInfo = activeSection === SECTIONS.DEMOGRAPHIC;
+  const hasProviderAccount = activeSection === SECTIONS.PROVIDER;
+
+  const isSaveAndClose = !(hasDemographicInfo || hasLoginInfo || hasProviderAccount);
+
+  const getSubmitButtonText = () =>
+    t(isSaveAndClose ? 'saveAndClose' : 'next', isSaveAndClose ? 'Save & close' : 'Next');
+
+  const getSubmitButtonType = () => (isSaveAndClose ? 'submit' : 'button');
+
+  const getSubmitButtonIcon = () => (isSaveAndClose ? ChevronLeft : ChevronRight);
+
+  const handleBackClick = useCallback(() => {
+    if (hasDemographicInfo) {
+      closeWorkspace();
+    } else {
+      toggleSection(steps[currentIndex - 1].id);
+      setCurrentIndex((i) => i - 1);
+    }
+  }, [hasDemographicInfo, closeWorkspace, currentIndex, steps, toggleSection]);
+
+  const handleNextClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isSaveAndClose) {
+        e.preventDefault();
+        toggleSection(steps[currentIndex + 1].id);
+        setCurrentIndex((i) => i + 1);
+      }
+    },
+    [isSaveAndClose, currentIndex, steps, toggleSection],
+  );
+
+  const markStepComplete = useCallback((index: number) => {
+    setCompletedStepIndex((prev) => Math.max(prev, index));
+  }, []);
+
+  const isStepEnabled = useCallback(
+    (index: number) => {
+      if (!isInitialValuesEmpty) {
+        return true;
+      }
+      if (index === 0) {
+        return true;
+      }
+      return completedStepIndex >= index - 1 && isStepValid(index - 1);
+    },
+    [isInitialValuesEmpty, completedStepIndex, isStepValid],
+  );
+
+  const handleStepChange = useCallback(
+    (newIndex: number) => {
+      if (!isStepEnabled(newIndex)) {
+        return;
+      }
+      toggleSection(steps[newIndex].id);
+      setCurrentIndex(newIndex);
+    },
+    [steps, toggleSection, isStepEnabled],
+  );
+
+  return {
+    steps,
+    currentIndex,
+    activeSection,
+    hasDemographicInfo,
+    hasLoginInfo,
+    hasProviderAccount,
+    hasRoles,
+    isSaveAndClose,
+    toggleSection,
+    setCurrentIndex,
+    markStepComplete,
+    isStepEnabled,
+    handleBackClick,
+    handleNextClick,
+    handleStepChange,
+    getSubmitButtonText,
+    getSubmitButtonType,
+    getSubmitButtonIcon,
+  };
+}

package/src/components/users/manage-users/hooks/useUserFormSubmission.ts

@@ -0,0 +1,264 @@
+import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import { mutate } from 'swr';
+import type { TFunction } from 'i18next';
+import {
+  createUser,
+  handleMutation,
+  createProvider,
+  type ProviderWithAttributes,
+} from '../../../../user-management.resources';
+import { createProviderAttribute, updateProviderAttributes } from '../../../modal/hwr-sync.resource';
+import { Provider, User } from '../../../../types';
+import type { ProviderSearchResult } from '../provider-search.resource';
+import type { AttributeTypeMapping, ProviderValues } from './useProviderAttributeMapping';
+import type { FieldErrors } from 'react-hook-form';
+import type { UserFormSchema } from './useUserManagementForm';
+import { extractNameParts } from '../user-management.utils';
+interface UseUserFormSubmissionParams {
+  attributeTypeMapping: AttributeTypeMapping;
+  selectedProvider: ProviderSearchResult | null;
+  initialUserValue: User;
+  provider: ProviderWithAttributes[];
+  providerValues: ProviderValues;
+  isProviderReadOnly: boolean;
+  isInitialValuesEmpty: boolean;
+  personPhonenumberAttributeUuid: string;
+  personEmailAttributeUuid: string;
+  licenseBodyUuid: string;
+  providerNationalIdUuid: string;
+  licenseNumberUuid: string;
+  passportNumberUuid: string;
+  providerUniqueIdentifierAttributeTypeUuid: string;
+  closeWorkspaceWithSavedChanges: () => void;
+  t: TFunction;
+}
+
+export function useUserFormSubmission({
+  attributeTypeMapping,
+  selectedProvider,
+  initialUserValue,
+  provider,
+  providerValues,
+  isProviderReadOnly,
+  isInitialValuesEmpty,
+  personPhonenumberAttributeUuid,
+  personEmailAttributeUuid,
+  licenseBodyUuid,
+  providerNationalIdUuid,
+  licenseNumberUuid,
+  passportNumberUuid,
+  providerUniqueIdentifierAttributeTypeUuid,
+  closeWorkspaceWithSavedChanges,
+  t,
+}: UseUserFormSubmissionParams) {
+  const showSnackbarMessage = (title: string, subtitle: string, kind: 'success' | 'error') => {
+    showSnackbar({ title, subtitle, kind, isLowContrast: true });
+  };
+
+  const sanitizeFormData = (data: UserFormSchema): UserFormSchema => {
+    const sanitized = { ...data };
+
+    if (isProviderReadOnly) {
+      const display = selectedProvider?.person?.display ?? initialUserValue?.person?.display ?? '';
+      const { givenName, middleName, familyName } = extractNameParts(display);
+      const gender = (selectedProvider?.person?.gender ?? initialUserValue?.person?.gender) as 'M' | 'F' | undefined;
+
+      Object.assign(sanitized, {
+        givenName,
+        middleName,
+        familyName,
+        gender,
+        phoneNumber: providerValues.phoneNumber,
+        email: providerValues.email,
+        providerUniqueIdentifier: providerValues.providerUniqueIdentifier,
+        nationalId: providerValues.nationalId,
+        passportNumber: providerValues.passportNumber,
+        providerLicense: providerValues.providerLicenseNumber,
+        registrationNumber: providerValues.registrationNumber,
+        qualification: providerValues.qualification,
+        licenseExpiryDate: providerValues.licenseExpiryDate
+          ? providerValues.licenseExpiryDate instanceof Date
+            ? providerValues.licenseExpiryDate
+            : new Date(providerValues.licenseExpiryDate)
+          : undefined,
+        systemId: provider[0]?.identifier ?? '',
+      });
+    } else {
+      if (isInitialValuesEmpty && provider.length > 0) {
+        sanitized.phoneNumber = providerValues.phoneNumber;
+        sanitized.email = providerValues.email;
+      } else if (isInitialValuesEmpty && provider.length === 0) {
+        sanitized.phoneNumber = '';
+        sanitized.email = '';
+      } else if (!isInitialValuesEmpty && !data.isEditProvider && provider.length > 0) {
+        sanitized.nationalId = providerValues.nationalId;
+        sanitized.passportNumber = providerValues.passportNumber;
+        sanitized.providerLicense = providerValues.providerLicenseNumber;
+        sanitized.registrationNumber = providerValues.registrationNumber;
+        sanitized.providerUniqueIdentifier = providerValues.providerUniqueIdentifier;
+      }
+    }
+
+    return sanitized;
+  };
+
+  const onSubmit = async (data: UserFormSchema) => {
+    const sanitizedData = sanitizeFormData(data);
+    const setProvider = sanitizedData.providerIdentifiers;
+    const editProvider = sanitizedData.isEditProvider;
+    const providerUUID = provider[0]?.uuid || '';
+
+    const providerPayload: Partial<Provider> = {
+      attributes: [
+        { attributeType: attributeTypeMapping.licenseNumber, value: sanitizedData.providerLicense },
+        {
+          attributeType: attributeTypeMapping.licenseExpiry,
+          value: sanitizedData.licenseExpiryDate ? sanitizedData.licenseExpiryDate.toISOString() : '',
+        },
+        { attributeType: attributeTypeMapping.licenseBody, value: sanitizedData.registrationNumber },
+        {
+          attributeType: attributeTypeMapping.providerUniqueIdentifier,
+          value: sanitizedData.providerUniqueIdentifier,
+        },
+        {
+          attributeType: attributeTypeMapping.providerNationalId,
+          value: sanitizedData.nationalId,
+        },
+        {
+          attributeType: attributeTypeMapping.qualification,
+          value: sanitizedData.qualification,
+        },
+        {
+          attributeType: attributeTypeMapping.passportNumber,
+          value: sanitizedData.passportNumber,
+        },
+        {
+          attributeType: attributeTypeMapping.phoneNumber,
+          value: sanitizedData.phoneNumber,
+        },
+        {
+          attributeType: attributeTypeMapping.providerAddress,
+          value: sanitizedData.email,
+        },
+      ].filter((attr) => attr.value),
+    };
+
+    const includePassword =
+      isInitialValuesEmpty || (sanitizedData.password && sanitizedData.password.trim().length > 0);
+
+    const payload: Partial<User> = {
+      username: sanitizedData.username,
+      ...(includePassword ? { password: sanitizedData.password } : {}),
+      person: selectedProvider?.person?.uuid
+        ? { uuid: selectedProvider.person.uuid, gender: selectedProvider.person.gender ?? '' }
+        : {
+            uuid: initialUserValue?.person?.uuid,
+            names: [
+              {
+                givenName: sanitizedData.givenName,
+                familyName: sanitizedData.familyName,
+                middleName: sanitizedData.middleName,
+              },
+            ],
+            gender: sanitizedData.gender,
+            attributes: [
+              { attributeType: personPhonenumberAttributeUuid, value: sanitizedData.phoneNumber },
+              { attributeType: personEmailAttributeUuid, value: sanitizedData.email },
+            ],
+          },
+      roles: sanitizedData.roles?.map((role) => ({
+        uuid: role.uuid,
+        name: role.display,
+        description: role.description ?? '',
+      })),
+    };
+
+    try {
+      const response = await createUser(payload, initialUserValue?.uuid || '');
+      if (response.uuid) {
+        showSnackbarMessage(t('userSaved', 'User saved successfully'), '', 'success');
+
+        handleMutation(
+          `${restBaseUrl}/user?v=custom:(uuid,username,display,systemId,retired,person:(uuid,display,gender,names:(givenName,familyName,middleName),attributes:(uuid,display)),roles:(uuid,description,display,name))`,
+        );
+
+        if (setProvider) {
+          try {
+            const providerUrl = providerUUID ? `${restBaseUrl}/provider/${providerUUID}` : `${restBaseUrl}/provider`;
+            const personUUID = response.person.uuid;
+            const identifier = response.systemId;
+            const providerResponse = await createProvider(personUUID, identifier, providerPayload, providerUrl);
+            if (providerResponse.ok) {
+              showSnackbarMessage(t('providerSaved', 'Provider saved successfully'), '', 'success');
+            }
+          } catch (error) {
+            showSnackbarMessage(
+              t('providerFail', 'Failed to save provider'),
+              t('providerFailedSubtitle', 'An error occurred while creating provider'),
+              'error',
+            );
+          }
+        }
+        if (editProvider) {
+          const updatableAttributes = [
+            { attributeType: licenseBodyUuid, value: sanitizedData?.registrationNumber },
+            { attributeType: providerNationalIdUuid, value: sanitizedData?.nationalId },
+            { attributeType: licenseNumberUuid, value: sanitizedData?.providerLicense },
+            { attributeType: passportNumberUuid, value: sanitizedData?.passportNumber },
+            {
+              attributeType: providerUniqueIdentifierAttributeTypeUuid,
+              value: sanitizedData?.providerUniqueIdentifier,
+            },
+          ].filter((attr) => attr?.value !== undefined && attr?.value !== null && attr?.value !== '');
+
+          await Promise.all(
+            updatableAttributes?.map((attr) => {
+              const existingAttributes = provider[0]?.attributes?.find(
+                (at) => at?.attributeType?.uuid === attr?.attributeType,
+              )?.uuid;
+
+              const attrPayload = {
+                attributeType: attr?.attributeType,
+                value: attr?.value,
+              };
+
+              if (!existingAttributes) {
+                return createProviderAttribute(attrPayload, providerUUID);
+              }
+              return updateProviderAttributes(attrPayload, providerUUID, existingAttributes);
+            }),
+          );
+          showSnackbar({
+            title: 'Success',
+            kind: 'success',
+            subtitle: t('updateMessage', 'Provider updated successfully'),
+          });
+        }
+      } else {
+        throw new Error('User creation failed');
+      }
+      handleMutation(`${restBaseUrl}/user`);
+      mutate((key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/provider`));
+      closeWorkspaceWithSavedChanges();
+    } catch (error) {
+      showSnackbarMessage(
+        t('userSaveFailed', 'Failed to save user'),
+        t('userCreationFailedSubtitle', 'An error occurred while saving user form '),
+        'error',
+      );
+    }
+  };
+
+  const handleError = (errors: FieldErrors<UserFormSchema>) => {
+    showSnackbar({
+      title: t('userSaveFailed', 'Fail to save'),
+      subtitle: t('userCreationFailedSubtitle', 'An error occurred while saving user form', {
+        errorMessage: JSON.stringify(errors, null, 2),
+      }),
+      kind: 'error',
+      isLowContrast: true,
+    });
+  };
+
+  return { onSubmit, handleError };
+}

package/src/components/users/manage-users/hooks/useUserManagementForm.ts

@@ -0,0 +1,122 @@
+import { useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import UserManagementFormSchema from '../../userManagementFormSchema';
+import { extractNameParts } from '../user-management.utils';
+import type { User } from '../../../../types';
+import type { ProviderValues } from './useProviderAttributeMapping';
+
+export type UserFormSchema = {
+  givenName: string;
+  middleName?: string;
+  familyName: string;
+  gender?: 'M' | 'F';
+  phoneNumber?: string;
+  email?: string;
+  providerIdentifiers?: boolean;
+  username: string;
+  password?: string;
+  confirmPassword?: string;
+  roles?: Array<{ uuid: string; display: string; description?: string | null }>;
+  primaryRole?: string;
+  systemId?: string;
+  providerLicense?: string;
+  licenseExpiryDate?: Date;
+  registrationNumber?: string;
+  qualification?: string;
+  nationalId?: string;
+  passportNumber?: string;
+  isEditProvider?: boolean;
+  providerUniqueIdentifier?: string;
+};
+
+interface UseUserManagementFormParams {
+  initialUserValue: User;
+  usernames: string[];
+  providerValues: ProviderValues;
+  loadingProvider: boolean;
+  isInitialValuesEmpty: boolean;
+  isProviderReadOnly?: boolean;
+}
+
+export function useUserManagementForm({
+  initialUserValue,
+  usernames,
+  providerValues,
+  loadingProvider,
+  isInitialValuesEmpty,
+  isProviderReadOnly = false,
+}: UseUserManagementFormParams) {
+  const { userManagementFormSchema } = UserManagementFormSchema(
+    usernames,
+    undefined,
+    !isProviderReadOnly,
+    isInitialValuesEmpty,
+  );
+
+  const formDefaultValues = useMemo(() => {
+    if (isInitialValuesEmpty) {
+      return {};
+    }
+    const { givenName, middleName, familyName } = extractNameParts(initialUserValue.person?.display || '');
+    return {
+      ...initialUserValue,
+      givenName,
+      middleName,
+      familyName,
+      phoneNumber: providerValues.phoneNumber,
+      email: providerValues.email,
+      roles:
+        initialUserValue.roles?.map((role) => ({
+          uuid: role.uuid,
+          display: role.display,
+          description: role.description,
+        })) || [],
+      gender: initialUserValue.person?.gender,
+      providerLicense: providerValues.providerLicenseNumber,
+      licenseExpiryDate: providerValues.licenseExpiryDate
+        ? new Date(providerValues.licenseExpiryDate as Date)
+        : undefined,
+      qualification: providerValues.qualification,
+      nationalId: providerValues.nationalId,
+      passportNumber: providerValues.passportNumber,
+      registrationNumber: providerValues.registrationNumber,
+      providerUniqueIdentifier: providerValues.providerUniqueIdentifier,
+    };
+  }, [
+    isInitialValuesEmpty,
+    initialUserValue,
+    providerValues.phoneNumber,
+    providerValues.email,
+    providerValues.providerLicenseNumber,
+    providerValues.licenseExpiryDate,
+    providerValues.qualification,
+    providerValues.nationalId,
+    providerValues.passportNumber,
+    providerValues.registrationNumber,
+    providerValues.providerUniqueIdentifier,
+  ]);
+
+  const userFormMethods = useForm<UserFormSchema>({
+    resolver: zodResolver(userManagementFormSchema),
+    mode: 'all',
+    defaultValues: formDefaultValues,
+  });
+
+  const { reset } = userFormMethods;
+  const { errors, isSubmitting, isDirty } = userFormMethods.formState;
+
+  useEffect(() => {
+    if (!loadingProvider && !isInitialValuesEmpty) {
+      reset(formDefaultValues);
+    }
+  }, [loadingProvider, formDefaultValues, isInitialValuesEmpty, reset]);
+
+  return {
+    userFormMethods,
+    formDefaultValues,
+    errors,
+    isSubmitting,
+    isDirty,
+  };
+}