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

26
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:
* - selectShippingRate A function that immediately returns the selected
* 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.
*/
export const useSelectShippingRate = ( shippingRates ) => {
const initiallySelectedRates = shippingRates.map(
const initiallySelectedRates = shippingRates
.map(
// the API responds with those keys.
// eslint-disable-next-line camelcase
( 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(
initiallySelectedRates
);
const { selectShippingRate } = useDispatch( storeKey );
const setRate = ( newShippingRate, packageId ) => {
setSelectedShipping( [ newShippingRate ] );
setSelectedShipping( {
...selectedShippingRates,
[ packageId ]: newShippingRate,
} );
selectShippingRate( newShippingRate, packageId );
};
return {