import BillingAddressContext from '#context/BillingAddressContext' ; import React , { FunctionComponent , ReactNode , useContext , useEffect , useReducer , } from 'react' ; import billingAddressReducer , { billingAddressInitialState , setBillingAddress , setBillingCustomerAddressId , } from '#reducers/BillingAddressReducer' ; import CommerceLayerContext from '#context/CommerceLayerContext' ; import components from '#config/components' ; import OrderContext from '#context/OrderContext' ; import AddressContext from '#context/AddressContext' ; const propTypes = components . BillingAddressContainer . propTypes ; type Props = { children : ReactNode ; } ; const BillingAddressContainer = ( props ) => { const { children } = props ; const [ state , dispatch ] = useReducer ( billingAddressReducer , billingAddressInitialState ) ; const config = useContext ( CommerceLayerContext ) ; const { order , include , addResourceToInclude } = useContext ( OrderContext ) ; const { shipToDifferentAddress , setCloneAddress } = useContext ( AddressContext ) ; useEffect ( ( ) => { if ( ! include ?. includes ( 'billing_address' ) ) { addResourceToInclude ( { newResource : 'billing_address' , resourcesIncluded : include , } ) ; } if ( order && config ) { setBillingCustomerAddressId ( { dispatch , order , setCloneAddress , } ) ; } return ( ) => { dispatch ( { type : 'cleanup' , payload : { } , } ) ; } ; } , [ order , include ] ) ; const contextValue = { ... state , setBillingAddress : async ( id , options ? ) => { await setBillingAddress ( id , { config , dispatch , order , shipToDifferentAddress , customerAddressId : options ?. customerAddressId , } ) ; setCloneAddress ( id , 'billing_address' ) ; } , } ; return ( < BillingAddressContext . Provider value = { contextValue } > { children } < /BillingAddressContext.Provider>); } ; BillingAddressContainer . propTypes = propTypes ; export default BillingAddressContainer ;