Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix select rates when multiple packages exists (https://github.com/woocommerce/woocommerce-blocks/pull/1945) 

* Select rates when multiple packages exists

* switch to using package_id

* update docs

* ponyfill fromEntries

* revert useShippingRates fromEntries fix
This commit is contained in:
Seghir Nadir 2020-03-12 10:59:43 +01:00 committed by GitHub
parent 401fe1d6c5
commit f55adc41cb
2 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
plugins/woocommerce-blocks/assets/js/base/components/shipping-rates-control/packages.js
View File

@ -20,19 +20,20 @@ const Packages = ( {
const { selectShippingRate, selectedShippingRates } = useSelectShippingRate( const { selectShippingRate, selectedShippingRates } = useSelectShippingRate(
shippingRates shippingRates
); );
/* eslint-disable camelcase */
return ( return (
<div className="wc-block-shipping-rates-control"> <div className="wc-block-shipping-rates-control">
{ shippingRates.map( ( shippingRate, i ) => ( { shippingRates.map( ( { package_id, ...shippingRate } ) => (
<Package <Package
key={ shippingRate.package_id } key={ package_id }
className={ className } className={ className }
collapsible={ collapsible } collapsible={ collapsible }
noResultsMessage={ noResultsMessage } noResultsMessage={ noResultsMessage }
onChange={ ( newShippingRate ) => { onChange={ ( newShippingRate ) => {
selectShippingRate( newShippingRate, i ); selectShippingRate( newShippingRate, package_id );
} } } }
renderOption={ renderOption } renderOption={ renderOption }
selected={ selectedShippingRates[ i ] } selected={ selectedShippingRates[ package_id ] }
shippingRate={ shippingRate } shippingRate={ shippingRate }
showItems={ shippingRates.length > 1 } showItems={ shippingRates.length > 1 }
title={ title={
@ -42,6 +43,7 @@ const Packages = ( {
) ) } ) ) }
</div> </div>
); );
/* eslint-enable */
}; };
Packages.propTypes = { Packages.propTypes = {

28
plugins/woocommerce-blocks/assets/js/base/hooks/shipping/use-select-shipping-rate.js
View File

@ -13,21 +13,35 @@ See also: https://github.com/woocommerce/woocommerce-gutenberg-products-block/tr
* @return {Object} This hook will return an object with two properties: * @return {Object} This hook will return an object with two properties:
* - selectShippingRate A function that immediately returns the selected * - selectShippingRate A function that immediately returns the selected
* rate and dispatches an action generator. * rate and dispatches an action generator.
* - selectedShippingRates An array of selected shipping rates, maintained * - selectedShippingRates An object of selected shipping rates and package id as key, maintained
* locally by a state and updated optimistically. * locally by a state and updated optimistically.
*/ */
export const useSelectShippingRate = ( shippingRates ) => { export const useSelectShippingRate = ( shippingRates ) => {
const initiallySelectedRates = shippingRates.map( const initiallySelectedRates = shippingRates
// the API responds with those keys. .map(
// eslint-disable-next-line camelcase // the API responds with those keys.
( p ) => p.shipping_rates.find( ( rate ) => rate.selected )?.rate_id /* eslint-disable camelcase */
); ( p ) => [
p.package_id,
p.shipping_rates.find( ( rate ) => rate.selected )?.rate_id,
]
/* eslint-enable */
)
// A fromEntries ponyfill, creates an object from an array of arrays.
.reduce( ( obj, [ key, val ] ) => {
obj[ key ] = val;
return obj;
}, {} );
const [ selectedShippingRates, setSelectedShipping ] = useState( const [ selectedShippingRates, setSelectedShipping ] = useState(
initiallySelectedRates initiallySelectedRates
); );
const { selectShippingRate } = useDispatch( storeKey ); const { selectShippingRate } = useDispatch( storeKey );
const setRate = ( newShippingRate, packageId ) => { const setRate = ( newShippingRate, packageId ) => {
setSelectedShipping( [ newShippingRate ] ); setSelectedShipping( {
...selectedShippingRates,
[ packageId ]: newShippingRate,
} );
selectShippingRate( newShippingRate, packageId ); selectShippingRate( newShippingRate, packageId );
}; };
return { return {