[TS migration] Follow up on improving the form

src/ONYXKEYS.ts

@@ -396,36 +396,35 @@ type AllOnyxKeys = DeepValueOf<typeof ONYXKEYS>;
 type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM]: FormTypes.AddDebitCardForm;
     [ONYXKEYS.FORMS.WORKSPACE_SETTINGS_FORM]: FormTypes.WorkspaceSettingsForm;
-    [ONYXKEYS.FORMS.WORKSPACE_DESCRIPTION_FORM]: FormTypes.WorkspaceProfileDescriptionForm;
     [ONYXKEYS.FORMS.WORKSPACE_RATE_AND_UNIT_FORM]: FormTypes.WorkspaceRateAndUnitForm;
     [ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM]: FormTypes.CloseAccountForm;
-    [ONYXKEYS.FORMS.PROFILE_SETTINGS_FORM]: FormTypes.Form;
+    [ONYXKEYS.FORMS.PROFILE_SETTINGS_FORM]: FormTypes.ProfileSettingsForm;
     [ONYXKEYS.FORMS.DISPLAY_NAME_FORM]: FormTypes.DisplayNameForm;
     [ONYXKEYS.FORMS.ROOM_NAME_FORM]: FormTypes.RoomNameForm;
-    [ONYXKEYS.FORMS.REPORT_DESCRIPTION_FORM]: FormTypes.Form;
-    [ONYXKEYS.FORMS.LEGAL_NAME_FORM]: FormTypes.Form;
-    [ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM]: FormTypes.Form;
+    [ONYXKEYS.FORMS.REPORT_DESCRIPTION_FORM]: FormTypes.ReportDescriptionForm;
+    [ONYXKEYS.FORMS.LEGAL_NAME_FORM]: FormTypes.LegalNameForm;
+    [ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM]: FormTypes.WorkspaceInviteMessageForm;
     [ONYXKEYS.FORMS.DATE_OF_BIRTH_FORM]: FormTypes.DateOfBirthForm;
-    [ONYXKEYS.FORMS.HOME_ADDRESS_FORM]: FormTypes.Form;
+    [ONYXKEYS.FORMS.HOME_ADDRESS_FORM]: FormTypes.HomeAddressForm;
     [ONYXKEYS.FORMS.NEW_ROOM_FORM]: FormTypes.NewRoomForm;
-    [ONYXKEYS.FORMS.ROOM_SETTINGS_FORM]: FormTypes.Form;
-    [ONYXKEYS.FORMS.NEW_TASK_FORM]: FormTypes.Form;
-    [ONYXKEYS.FORMS.EDIT_TASK_FORM]: FormTypes.Form;
-    [ONYXKEYS.FORMS.MONEY_REQUEST_DESCRIPTION_FORM]: FormTypes.Form;
-    [ONYXKEYS.FORMS.MONEY_REQUEST_MERCHANT_FORM]: FormTypes.Form;
-    [ONYXKEYS.FORMS.MONEY_REQUEST_AMOUNT_FORM]: FormTypes.Form;
-    [ONYXKEYS.FORMS.MONEY_REQUEST_DATE_FORM]: FormTypes.Form;
+    [ONYXKEYS.FORMS.ROOM_SETTINGS_FORM]: FormTypes.RoomSettingsForm;
+    [ONYXKEYS.FORMS.NEW_TASK_FORM]: FormTypes.NewTaskForm;
+    [ONYXKEYS.FORMS.EDIT_TASK_FORM]: FormTypes.EditTaskForm;
+    [ONYXKEYS.FORMS.MONEY_REQUEST_DESCRIPTION_FORM]: FormTypes.MoneyRequestDescriptionForm;
+    [ONYXKEYS.FORMS.MONEY_REQUEST_MERCHANT_FORM]: FormTypes.MoneyRequestMerchantForm;
+    [ONYXKEYS.FORMS.MONEY_REQUEST_AMOUNT_FORM]: FormTypes.MoneyRequestAmountForm;
+    [ONYXKEYS.FORMS.MONEY_REQUEST_DATE_FORM]: FormTypes.MoneyRequestDateForm;
     [ONYXKEYS.FORMS.MONEY_REQUEST_HOLD_FORM]: FormTypes.MoneyRequestHoldReasonForm;
-    [ONYXKEYS.FORMS.NEW_CONTACT_METHOD_FORM]: FormTypes.Form;
-    [ONYXKEYS.FORMS.WAYPOINT_FORM]: FormTypes.Form;
-    [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM]: FormTypes.Form;
-    [ONYXKEYS.FORMS.SETTINGS_STATUS_CLEAR_DATE_FORM]: FormTypes.Form;
-    [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_CLEAR_AFTER_FORM]: FormTypes.Form;
+    [ONYXKEYS.FORMS.NEW_CONTACT_METHOD_FORM]: FormTypes.NewContactMethodForm;
+    [ONYXKEYS.FORMS.WAYPOINT_FORM]: FormTypes.WaypointForm;
+    [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM]: FormTypes.SettingsStatusSetForm;
+    [ONYXKEYS.FORMS.SETTINGS_STATUS_CLEAR_DATE_FORM]: FormTypes.SettingsStatusClearDateForm;
+    [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_CLEAR_AFTER_FORM]: FormTypes.SettingsStatusSetClearAfterForm;
     [ONYXKEYS.FORMS.PRIVATE_NOTES_FORM]: FormTypes.PrivateNotesForm;
     [ONYXKEYS.FORMS.I_KNOW_A_TEACHER_FORM]: FormTypes.IKnowTeacherForm;
     [ONYXKEYS.FORMS.INTRO_SCHOOL_PRINCIPAL_FORM]: FormTypes.IntroSchoolPrincipalForm;
-    [ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD]: FormTypes.Form;
-    [ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM]: FormTypes.Form;
+    [ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD]: FormTypes.ReportVirtualCardFraudForm;
+    [ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM]: FormTypes.ReportPhysicalCardForm;
     [ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM]: FormTypes.GetPhysicalCardForm;
     [ONYXKEYS.FORMS.REPORT_FIELD_EDIT_FORM]: FormTypes.ReportFieldEditForm;
     [ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM]: FormTypes.ReimbursementAccountForm;

src/libs/API/parameters/UpdateBeneficialOwnersForBankAccountParams.ts

@@ -1,5 +1,5 @@
-import type {BeneficialOwnersStepProps} from '@src/types/form/ReimbursementAccountForm';
+import type {ACHContractStepProps} from '@src/types/form/ReimbursementAccountForm';
 
-type UpdateBeneficialOwnersForBankAccountParams = BeneficialOwnersStepProps & {bankAccountID: number; policyID: string; canUseNewVbbaFlow?: boolean};
+type UpdateBeneficialOwnersForBankAccountParams = Partial<ACHContractStepProps> & {bankAccountID: number; policyID: string; canUseNewVbbaFlow?: boolean};
 
 export default UpdateBeneficialOwnersForBankAccountParams;

src/libs/API/parameters/UpdateCompanyInformationForBankAccountParams.ts

@@ -1,5 +1,7 @@
-import type {CompanyStepProps} from '@src/types/form/ReimbursementAccountForm';
+import type {BankAccountStepProps, CompanyStepProps, ReimbursementAccountProps} from '@src/types/form/ReimbursementAccountForm';
 
-type UpdateCompanyInformationForBankAccountParams = CompanyStepProps & {bankAccountID: number; policyID: string; canUseNewVbbaFlow?: boolean};
+type BankAccountCompanyInformation = BankAccountStepProps & CompanyStepProps & ReimbursementAccountProps;
+
+type UpdateCompanyInformationForBankAccountParams = Partial<BankAccountCompanyInformation> & {bankAccountID: number; policyID: string; canUseNewVbbaFlow?: boolean};
 
 export default UpdateCompanyInformationForBankAccountParams;

src/libs/GetPhysicalCardUtils.ts

@@ -53,7 +53,11 @@ function setCurrentRoute(currentRoute: string, domain: string, privatePersonalDe
  * @param privatePersonalDetails
  * @returns
  */
-function getUpdatedDraftValues(draftValues: OnyxEntry<GetPhysicalCardForm>, privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>, loginList: OnyxEntry<LoginList>): GetPhysicalCardForm {
+function getUpdatedDraftValues(
+    draftValues: OnyxEntry<GetPhysicalCardForm>,
+    privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>,
+    loginList: OnyxEntry<LoginList>,
+): Partial<GetPhysicalCardForm> {
     const {address, legalFirstName, legalLastName, phoneNumber} = privatePersonalDetails ?? {};
 
     return {

src/libs/ValidationUtils.ts

@@ -5,7 +5,7 @@ import isDate from 'lodash/isDate';
 import isEmpty from 'lodash/isEmpty';
 import isObject from 'lodash/isObject';
 import type {OnyxCollection} from 'react-native-onyx';
-import type {FormInputErrors, FormOnyxKeys, FormOnyxValues} from '@components/Form/types';
+import type {FormInputErrors, FormOnyxKeys, FormOnyxValues, FormValue} from '@components/Form/types';
 import CONST from '@src/CONST';
 import type {OnyxFormKey} from '@src/ONYXKEYS';
 import type {Report} from '@src/types/onyx';
@@ -77,7 +77,7 @@ function isValidPastDate(date: string | Date): boolean {
  * Used to validate a value that is "required".
  * @param value - field value
  */
-function isRequiredFulfilled(value?: string | boolean | Date): boolean {
+function isRequiredFulfilled(value?: FormValue): boolean {
     if (!value) {
         return false;
     }
@@ -103,7 +103,7 @@ function getFieldRequiredErrors<TFormID extends OnyxFormKey>(values: FormOnyxVal
     const errors: FormInputErrors<TFormID> = {};
 
     requiredFields.forEach((fieldKey) => {
-        if (isRequiredFulfilled(values[fieldKey] as keyof FormOnyxValues)) {
+        if (isRequiredFulfilled(values[fieldKey] as FormValue)) {
             return;
         }
 

src/libs/actions/BankAccounts.ts

@@ -366,7 +366,7 @@ function openReimbursementAccountPage(stepToOpen: ReimbursementAccountStep, subS
  * Updates the bank account in the database with the company step data
  * @param params - Business step form data
  */
-function updateCompanyInformationForBankAccount(bankAccountID: number, params: CompanyStepProps, policyID: string) {
+function updateCompanyInformationForBankAccount(bankAccountID: number, params: Partial<CompanyStepProps>, policyID: string) {
     API.write(
         WRITE_COMMANDS.UPDATE_COMPANY_INFORMATION_FOR_BANK_ACCOUNT,
         {
@@ -383,7 +383,7 @@ function updateCompanyInformationForBankAccount(bankAccountID: number, params: C
  * Add beneficial owners for the bank account and verify the accuracy of the information provided
  * @param params - Beneficial Owners step form params
  */
-function updateBeneficialOwnersForBankAccount(bankAccountID: number, params: BeneficialOwnersStepProps, policyID: string) {
+function updateBeneficialOwnersForBankAccount(bankAccountID: number, params: Partial<BeneficialOwnersStepProps>, policyID: string) {
     API.write(
         WRITE_COMMANDS.UPDATE_BENEFICIAL_OWNERS_FOR_BANK_ACCOUNT,
         {

src/libs/actions/FormActions.ts

@@ -1,6 +1,5 @@
 import Onyx from 'react-native-onyx';
 import type {NullishDeep} from 'react-native-onyx';
-import FormUtils from '@libs/FormUtils';
 import type {OnyxFormDraftKey, OnyxFormKey, OnyxValue} from '@src/ONYXKEYS';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 
@@ -25,11 +24,11 @@ function clearErrorFields(formID: OnyxFormKey) {
 }
 
 function setDraftValues(formID: OnyxFormKey, draftValues: NullishDeep<OnyxValue<OnyxFormDraftKey>>) {
-    Onyx.merge(FormUtils.getDraftKey(formID), draftValues);
+    Onyx.merge(`${formID}Draft`, draftValues);
 }
 
 function clearDraftValues(formID: OnyxFormKey) {
-    Onyx.set(FormUtils.getDraftKey(formID), null);
+    Onyx.set(`${formID}Draft`, null);
 }
 
 export {setDraftValues, setErrorFields, setErrors, clearErrors, clearErrorFields, setIsLoading, clearDraftValues};

src/libs/actions/PaymentMethods.ts

@@ -12,6 +12,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Route} from '@src/ROUTES';
+import INPUT_IDS from '@src/types/form/AddDebitCardForm';
 import type {BankAccountList, FundList} from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import type PaymentMethod from '@src/types/onyx/PaymentMethod';
@@ -205,7 +206,15 @@ function clearDebitCardFormErrorAndSubmit() {
     Onyx.set(ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM, {
         isLoading: false,
         errors: undefined,
-        setupComplete: false,
+        [INPUT_IDS.SETUP_COMPLETE]: false,
+        [INPUT_IDS.NAME_ON_CARD]: '',
+        [INPUT_IDS.CARD_NUMBER]: '',
+        [INPUT_IDS.EXPIRATION_DATE]: '',
+        [INPUT_IDS.SECURITY_CODE]: '',
+        [INPUT_IDS.ADDRESS_STREET]: '',
+        [INPUT_IDS.ADDRESS_ZIP_CODE]: '',
+        [INPUT_IDS.ADDRESS_STATE]: '',
+        [INPUT_IDS.ACCEPT_TERMS]: '',
     });
 }
 

src/libs/actions/Report.ts

@@ -66,6 +66,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Route} from '@src/ROUTES';
 import ROUTES from '@src/ROUTES';
+import INPUT_IDS from '@src/types/form/NewRoomForm';
 import type {PersonalDetails, PersonalDetailsList, PolicyReportField, RecentlyUsedReportFields, ReportActionReactions, ReportMetadata, ReportUserIsTyping} from '@src/types/onyx';
 import type {Decision, OriginalMessageIOU} from '@src/types/onyx/OriginalMessage';
 import type {NotificationPreference, WriteCapability} from '@src/types/onyx/Report';
@@ -2805,6 +2806,11 @@ function clearNewRoomFormError() {
         isLoading: false,
         errorFields: null,
         errors: null,
+        [INPUT_IDS.ROOM_NAME]: '',
+        [INPUT_IDS.REPORT_DESCRIPTION]: '',
+        [INPUT_IDS.POLICY_ID]: '',
+        [INPUT_IDS.WRITE_CAPABILITY]: '',
+        [INPUT_IDS.VISIBILITY]: '',
     });
 }
 

src/pages/iou/request/step/IOURequestStepDate.js

@@ -19,7 +19,7 @@ import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {policyPropTypes} from '@src/pages/workspace/withPolicy';
-import INPUT_IDS from '@src/types/form/MoneyRequestCreatedForm';
+import INPUT_IDS from '@src/types/form/MoneyRequestDateForm';
 import IOURequestStepRoutePropTypes from './IOURequestStepRoutePropTypes';
 import StepScreenWrapper from './StepScreenWrapper';
 import withFullTransactionOrNotFound from './withFullTransactionOrNotFound';

src/pages/settings/Wallet/ExpensifyCardPage.js

@@ -16,7 +16,6 @@ import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
-import FormUtils from '@libs/FormUtils';
 import * as GetPhysicalCardUtils from '@libs/GetPhysicalCardUtils';
 import {translatableTextPropTypes} from '@libs/Localize';
 import Navigation from '@libs/Navigation/Navigation';
@@ -323,6 +322,6 @@ export default withOnyx({
         key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
     },
     draftValues: {
-        key: FormUtils.getDraftKey(ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM),
+        key: ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM_DRAFT,
     },
 })(ExpensifyCardPage);

src/types/form/AddDebitCardForm.ts

@@ -1,3 +1,4 @@
+import type {ValueOf} from 'type-fest';
 import type Form from './Form';
 
 const INPUT_IDS = {
@@ -12,19 +13,23 @@ const INPUT_IDS = {
     ACCEPT_TERMS: 'acceptTerms',
 } as const;
 
-type AddDebitCardForm = Form<{
-    /** Whether the form has been submitted */
-    [INPUT_IDS.SETUP_COMPLETE]: boolean;
+type InputID = ValueOf<typeof INPUT_IDS>;
 
-    [INPUT_IDS.NAME_ON_CARD]?: string;
-    [INPUT_IDS.CARD_NUMBER]?: string;
-    [INPUT_IDS.EXPIRATION_DATE]?: string;
-    [INPUT_IDS.SECURITY_CODE]?: string;
-    [INPUT_IDS.ADDRESS_STREET]?: string;
-    [INPUT_IDS.ADDRESS_ZIP_CODE]?: string;
-    [INPUT_IDS.ADDRESS_STATE]?: string;
-    [INPUT_IDS.ACCEPT_TERMS]?: string;
-}>;
+type AddDebitCardForm = Form<
+    InputID,
+    {
+        /** Whether the form has been submitted */
+        [INPUT_IDS.SETUP_COMPLETE]: boolean;
+        [INPUT_IDS.NAME_ON_CARD]: string;
+        [INPUT_IDS.CARD_NUMBER]: string;
+        [INPUT_IDS.EXPIRATION_DATE]: string;
+        [INPUT_IDS.SECURITY_CODE]: string;
+        [INPUT_IDS.ADDRESS_STREET]: string;
+        [INPUT_IDS.ADDRESS_ZIP_CODE]: string;
+        [INPUT_IDS.ADDRESS_STATE]: string;
+        [INPUT_IDS.ACCEPT_TERMS]: string;
+    }
+>;
 
 export type {AddDebitCardForm};
 export default INPUT_IDS;

src/types/form/CloseAccountForm.ts

@@ -1,3 +1,4 @@
+import type {ValueOf} from 'type-fest';
 import type Form from './Form';
 
 const INPUT_IDS = {
@@ -6,11 +7,16 @@ const INPUT_IDS = {
     SUCCESS: 'success',
 } as const;
 
-type CloseAccountForm = Form<{
-    [INPUT_IDS.REASON_FOR_LEAVING]: string;
-    [INPUT_IDS.PHONE_OR_EMAIL]: string;
-    [INPUT_IDS.SUCCESS]: string;
-}>;
+type InputID = ValueOf<typeof INPUT_IDS>;
+
+type CloseAccountForm = Form<
+    InputID,
+    {
+        [INPUT_IDS.REASON_FOR_LEAVING]: string;
+        [INPUT_IDS.PHONE_OR_EMAIL]: string;
+        [INPUT_IDS.SUCCESS]: string;
+    }
+>;
 
 export type {CloseAccountForm};
 export default INPUT_IDS;

src/types/form/DateOfBirthForm.ts

@@ -1,13 +1,19 @@
+import type {ValueOf} from 'type-fest';
 import type Form from './Form';
 
 const INPUT_IDS = {
     DOB: 'dob',
 } as const;
 
-type DateOfBirthForm = Form<{
-    /** Date of birth */
-    [INPUT_IDS.DOB]: string;
-}>;
+type InputID = ValueOf<typeof INPUT_IDS>;
+
+type DateOfBirthForm = Form<
+    InputID,
+    {
+        /** Date of birth */
+        [INPUT_IDS.DOB]: string;
+    }
+>;
 
 export type {DateOfBirthForm};
 export default INPUT_IDS;

src/types/form/DisplayNameForm.ts

@@ -1,14 +1,20 @@
+import type {ValueOf} from 'type-fest';
 import type Form from './Form';
 
 const INPUT_IDS = {
     FIRST_NAME: 'firstName',
     LAST_NAME: 'lastName',
 } as const;
 
-type DisplayNameForm = Form<{
-    [INPUT_IDS.FIRST_NAME]: string;
-    [INPUT_IDS.LAST_NAME]: string;
-}>;
+type InputID = ValueOf<typeof INPUT_IDS>;
+
+type DisplayNameForm = Form<
+    InputID,
+    {
+        [INPUT_IDS.FIRST_NAME]: string;
+        [INPUT_IDS.LAST_NAME]: string;
+    }
+>;
 
 export type {DisplayNameForm};
 export default INPUT_IDS;

src/types/form/EditTaskForm.ts

@@ -1,14 +1,20 @@
+import type {ValueOf} from 'type-fest';
 import type Form from './Form';
 
 const INPUT_IDS = {
     TITLE: 'title',
     DESCRIPTION: 'description',
 } as const;
 
-type EditTaskForm = Form<{
-    [INPUT_IDS.TITLE]: string;
-    [INPUT_IDS.DESCRIPTION]: string;
-}>;
+type InputID = ValueOf<typeof INPUT_IDS>;
+
+type EditTaskForm = Form<
+    InputID,
+    {
+        [INPUT_IDS.TITLE]: string;
+        [INPUT_IDS.DESCRIPTION]: string;
+    }
+>;
 
 export type {EditTaskForm};
 export default INPUT_IDS;

src/types/form/Form.ts

@@ -12,8 +12,8 @@ type BaseForm = {
     errorFields?: OnyxCommon.ErrorFields | null;
 };
 
-type FormValues = Record<string, FormValue>;
-type Form<TFormValues extends FormValues = FormValues> = TFormValues & BaseForm;
+type FormValues<TInputs extends string> = Record<TInputs, FormValue>;
+type Form<TInputs extends string = string, TFormValues extends FormValues<TInputs> = FormValues<TInputs>> = TFormValues & BaseForm;
 
 export default Form;
 export type {BaseForm};