woocommerce/plugins/woocommerce-blocks/assets/js/settings/shared/default-fields.ts

/**
 * External dependencies
 */
import type { AllHTMLAttributes, AriaAttributes } from 'react';

/**
 * Internal dependencies
 */
import { getSetting } from './utils';
import { SelectOption } from '../../base/components';

// A list of attributes that can be added to a custom field when registering it.
type CustomFieldAttributes = Pick<
	AllHTMLAttributes< HTMLInputElement >,
	| 'maxLength'
	| 'readOnly'
	| 'pattern'
	| 'title'
	| 'autoCapitalize'
	| 'autoComplete'
> &
	AriaAttributes;

export interface FormField {
	// The label for the field.
	label: string;
	// The label for the field if made optional.
	optionalLabel: string;
	// The HTML autocomplete attribute value. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
	autocomplete: string;
	// How this field value is capitalized.
	autocapitalize?: string;
	// Set to true if the field is required.
	required: boolean;
	// Set to true if the field should not be rendered.
	hidden: boolean;
	// Fields will be sorted and render in this order, lowest to highest.
	index: number;
	// The type of input to render. Defaults to text.
	type?: string;
	// The options if this is a select field
	options?: SelectOption[];
	// The placeholder for the field, only applicable for select fields.
	placeholder?: string;
	// Additional attributes added when registering a field. String in key is required for data attributes.
	attributes?: Record< keyof CustomFieldAttributes, string >;
}

export interface LocaleSpecificFormField extends Partial< FormField > {
	priority?: number | undefined;
}

export interface CoreAddressForm {
	first_name: FormField;
	last_name: FormField;
	company: FormField;
	address_1: FormField;
	address_2: FormField;
	country: FormField;
	city: FormField;
	state: FormField;
	postcode: FormField;
	phone: FormField;
}

export interface CoreContactForm {
	email: FormField;
}

export type AddressForm = CoreAddressForm & Record< string, FormField >;
export type ContactForm = CoreContactForm & Record< string, FormField >;
export type FormFields = AddressForm & ContactForm;
export type AddressFormValues = Omit< ShippingAddress, 'email' >;
export type ContactFormValues = { email: string };
export type AdditionalInformationFormValues = Record< string, string >;
export type FormType =
	| 'billing'
	| 'shipping'
	| 'contact'
	| 'additional-information';

export interface CoreAddress {
	first_name: string;
	last_name: string;
	company: string;
	address_1: string;
	address_2: string;
	country: string;
	city: string;
	state: string;
	postcode: string;
	phone: string;
}

export type AdditionalValues = Record<
	Exclude< string, keyof CoreAddress >,
	string | boolean
>;

export type ShippingAddress = CoreAddress;
export interface BillingAddress extends ShippingAddress {
	email: string;
}

export type KeyedFormField = FormField & {
	key: keyof FormFields;
	errorMessage?: string;
};

export type CountryAddressForm = Record< string, FormFields >;

export type FormFieldsConfig = Record< keyof FormFields, Partial< FormField > >;

/**
 * Default field properties.
 */
export const defaultFields: FormFields =
	getSetting< FormFields >( 'defaultFields' );

export default defaultFields;