130 lines
3.1 KiB
TypeScript
130 lines
3.1 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { useMemo, useEffect, Fragment, useState } from '@wordpress/element';
|
|
import {
|
|
useCheckoutAddress,
|
|
useStoreEvents,
|
|
useEditorContext,
|
|
noticeContexts,
|
|
} from '@woocommerce/base-context';
|
|
import { AddressForm } from '@woocommerce/base-components/cart-checkout';
|
|
import Noninteractive from '@woocommerce/base-components/noninteractive';
|
|
import type {
|
|
BillingAddress,
|
|
AddressField,
|
|
AddressFields,
|
|
} from '@woocommerce/settings';
|
|
import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import PhoneNumber from '../../phone-number';
|
|
|
|
const Block = ( {
|
|
showCompanyField = false,
|
|
showApartmentField = false,
|
|
showPhoneField = false,
|
|
requireCompanyField = false,
|
|
requirePhoneField = false,
|
|
}: {
|
|
showCompanyField: boolean;
|
|
showApartmentField: boolean;
|
|
showPhoneField: boolean;
|
|
requireCompanyField: boolean;
|
|
requirePhoneField: boolean;
|
|
} ): JSX.Element => {
|
|
const {
|
|
defaultAddressFields,
|
|
billingAddress,
|
|
setBillingAddress,
|
|
setShippingAddress,
|
|
setBillingPhone,
|
|
forcedBillingAddress,
|
|
} = useCheckoutAddress();
|
|
const { dispatchCheckoutEvent } = useStoreEvents();
|
|
const { isEditor } = useEditorContext();
|
|
// Clears data if fields are hidden.
|
|
useEffect( () => {
|
|
if ( ! showPhoneField ) {
|
|
setBillingPhone( '' );
|
|
}
|
|
}, [ showPhoneField, setBillingPhone ] );
|
|
|
|
const [ addressesSynced, setAddressesSynced ] = useState( false );
|
|
|
|
// Syncs shipping address with billing address if "Force shipping to the customer billing address" is enabled.
|
|
useEffect( () => {
|
|
if ( addressesSynced ) {
|
|
return;
|
|
}
|
|
if ( forcedBillingAddress ) {
|
|
setShippingAddress( billingAddress );
|
|
}
|
|
setAddressesSynced( true );
|
|
}, [
|
|
addressesSynced,
|
|
setShippingAddress,
|
|
billingAddress,
|
|
forcedBillingAddress,
|
|
] );
|
|
|
|
const addressFieldsConfig = useMemo( () => {
|
|
return {
|
|
company: {
|
|
hidden: ! showCompanyField,
|
|
required: requireCompanyField,
|
|
},
|
|
address_2: {
|
|
hidden: ! showApartmentField,
|
|
},
|
|
};
|
|
}, [
|
|
showCompanyField,
|
|
requireCompanyField,
|
|
showApartmentField,
|
|
] ) as Record< keyof AddressFields, Partial< AddressField > >;
|
|
|
|
const AddressFormWrapperComponent = isEditor ? Noninteractive : Fragment;
|
|
|
|
return (
|
|
<AddressFormWrapperComponent>
|
|
<StoreNoticesContainer context={ noticeContexts.BILLING_ADDRESS } />
|
|
<AddressForm
|
|
id="billing"
|
|
type="billing"
|
|
onChange={ ( values: Partial< BillingAddress > ) => {
|
|
setBillingAddress( values );
|
|
if ( forcedBillingAddress ) {
|
|
setShippingAddress( values );
|
|
dispatchCheckoutEvent( 'set-shipping-address' );
|
|
}
|
|
dispatchCheckoutEvent( 'set-billing-address' );
|
|
} }
|
|
values={ billingAddress }
|
|
fields={
|
|
Object.keys(
|
|
defaultAddressFields
|
|
) as ( keyof AddressFields )[]
|
|
}
|
|
fieldConfig={ addressFieldsConfig }
|
|
/>
|
|
{ showPhoneField && (
|
|
<PhoneNumber
|
|
isRequired={ requirePhoneField }
|
|
value={ billingAddress.phone }
|
|
onChange={ ( value ) => {
|
|
setBillingPhone( value );
|
|
dispatchCheckoutEvent( 'set-phone-number', {
|
|
step: 'billing',
|
|
} );
|
|
} }
|
|
/>
|
|
) }
|
|
</AddressFormWrapperComponent>
|
|
);
|
|
};
|
|
|
|
export default Block;
|