109 lines
2.7 KiB
TypeScript
109 lines
2.7 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { useMemo, useEffect, Fragment } from '@wordpress/element';
|
|
import { AddressForm } from '@woocommerce/base-components/cart-checkout';
|
|
import {
|
|
useCheckoutAddress,
|
|
useStoreEvents,
|
|
useEditorContext,
|
|
} from '@woocommerce/base-context';
|
|
import { CheckboxControl } from '@woocommerce/blocks-checkout';
|
|
import Noninteractive from '@woocommerce/base-components/noninteractive';
|
|
|
|
/**
|
|
* 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,
|
|
setShippingFields,
|
|
shippingFields,
|
|
setShippingAsBilling,
|
|
shippingAsBilling,
|
|
setShippingPhone,
|
|
} = useCheckoutAddress();
|
|
const { dispatchCheckoutEvent } = useStoreEvents();
|
|
const { isEditor } = useEditorContext();
|
|
|
|
// Clears data if fields are hidden.
|
|
useEffect( () => {
|
|
if ( ! showPhoneField ) {
|
|
setShippingPhone( '' );
|
|
}
|
|
}, [ showPhoneField, setShippingPhone ] );
|
|
|
|
const addressFieldsConfig = useMemo( () => {
|
|
return {
|
|
company: {
|
|
hidden: ! showCompanyField,
|
|
required: requireCompanyField,
|
|
},
|
|
address_2: {
|
|
hidden: ! showApartmentField,
|
|
},
|
|
};
|
|
}, [ showCompanyField, requireCompanyField, showApartmentField ] );
|
|
|
|
const AddressFormWrapperComponent = isEditor ? Noninteractive : Fragment;
|
|
|
|
return (
|
|
<>
|
|
<AddressFormWrapperComponent>
|
|
<AddressForm
|
|
id="shipping"
|
|
type="shipping"
|
|
onChange={ ( values: Record< string, unknown > ) => {
|
|
setShippingFields( values );
|
|
dispatchCheckoutEvent( 'set-shipping-address' );
|
|
} }
|
|
values={ shippingFields }
|
|
fields={ Object.keys( defaultAddressFields ) }
|
|
fieldConfig={ addressFieldsConfig }
|
|
/>
|
|
{ showPhoneField && (
|
|
<PhoneNumber
|
|
id="shipping-phone"
|
|
isRequired={ requirePhoneField }
|
|
value={ shippingFields.phone }
|
|
onChange={ ( value ) => {
|
|
setShippingPhone( value );
|
|
dispatchCheckoutEvent( 'set-phone-number', {
|
|
step: 'shipping',
|
|
} );
|
|
} }
|
|
/>
|
|
) }
|
|
</AddressFormWrapperComponent>
|
|
<CheckboxControl
|
|
className="wc-block-checkout__use-address-for-billing"
|
|
label={ __(
|
|
'Use same address for billing',
|
|
'woo-gutenberg-products-block'
|
|
) }
|
|
checked={ shippingAsBilling }
|
|
onChange={ ( checked: boolean ) =>
|
|
setShippingAsBilling( checked )
|
|
}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Block;
|