52 lines
1.7 KiB
JavaScript
52 lines
1.7 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { useDispatch } from '@wordpress/data';
|
|
import { useState } from '@wordpress/element';
|
|
import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data';
|
|
|
|
/**
|
|
* This is a custom hook for loading the selected shipping rate from the cart store and actions for selecting a rate.
|
|
See also: https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/master/src/RestApi/StoreApi
|
|
*
|
|
* @param {Array} shippingRates an array of packages with shipping rates.
|
|
* @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 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(
|
|
// the API responds with those keys.
|
|
/* 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( {
|
|
...selectedShippingRates,
|
|
[ packageId ]: newShippingRate,
|
|
} );
|
|
selectShippingRate( newShippingRate, packageId );
|
|
};
|
|
return {
|
|
selectShippingRate: setRate,
|
|
selectedShippingRates,
|
|
};
|
|
};
|