woocommerce/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/index.js

182 lines
4.9 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import { useEffect } from '@wordpress/element';
import PropTypes from 'prop-types';
import { speak } from '@wordpress/a11y';
import LoadingMask from '@woocommerce/base-components/loading-mask';
import { ExperimentalOrderShippingPackages } from '@woocommerce/blocks-checkout';
import {
getShippingRatesPackageCount,
getShippingRatesRateCount,
} from '@woocommerce/base-utils';
import { useStoreCart } from '@woocommerce/base-context/hooks';
/**
* Internal dependencies
*/
import ShippingRatesControlPackage from '../shipping-rates-control-package';
/**
* @typedef {import('react')} React
*/
/**
* Renders the shipping rates control element.
*
* @param {Object} props Incoming props.
* @param {Array} props.shippingRates Array of packages containing shipping rates.
* @param {boolean} props.shippingRatesLoading True when rates are being loaded.
* @param {string} props.className Class name for package rates.
* @param {boolean} [props.collapsible] If true, when multiple packages are rendered they can be toggled open and closed.
* @param {React.ReactElement} props.noResultsMessage Rendered when there are no packages.
* @param {Function} [props.renderOption] Function to render a shipping rate.
*/
const ShippingRatesControl = ( {
Update and select shipping rates dynamically (https://github.com/woocommerce/woocommerce-blocks/pull/1794) * add select shipping endpoint to router * add select shipping method * add selected rates to cart * better select rates * move schema function to seperate function * move validation to Cart Controller * fix wrong session key * Update shipping/cart endpoints (https://github.com/woocommerce/woocommerce-blocks/pull/1833) * Items should not have keys in API response * Include package ID in response (this is just a basic index) * /cart/select-shipping-rate/package_id * Add package_id to package array * Update responses and add shipping-rates to main cart endpoint * update-shipping endpoint * Add querying selected shipping rate to the store (https://github.com/woocommerce/woocommerce-blocks/pull/1829) * add selecting shipping to store * directly call useSelectShippingRate * refactor cart keys transformation to reducer * remove selecting first result and accept selecting * move update shipping to new endpoint * pass selected rates down * select shipping right directly and fix editor issues * fix some broken prop types * key -> package id * Update and fix cart/shipping-rate tests * fix case for when rates are set * Update useShippingRates test * add args to rest endpoint * move selecting shipping rate logic to hook * fix some naming issues * update propTypes * update action call * fully watch cart state * address review issues * fix prop type issues * fix issue with rates not loading in checkout * remove extra package for shipping * move ShippingCalculatorOptions to outside Co-authored-by: Mike Jolley <mike.jolley@me.com> Co-authored-by: Albert Juhé Lluveras <aljullu@gmail.com>
2020-03-05 19:54:05 +00:00
shippingRates,
shippingRatesLoading,
className,
collapsible = false,
noResultsMessage,
renderOption,
} ) => {
useEffect( () => {
if ( shippingRatesLoading ) {
return;
}
const packageCount = getShippingRatesPackageCount( shippingRates );
const shippingOptions = getShippingRatesRateCount( shippingRates );
if ( packageCount === 1 ) {
speak(
sprintf(
/* translators: %d number of shipping options found. */
_n(
'%d shipping option was found.',
'%d shipping options were found.',
shippingOptions,
'woo-gutenberg-products-block'
),
shippingOptions
)
);
} else {
speak(
sprintf(
/* translators: %d number of shipping packages packages. */
_n(
'Shipping option searched for %d package.',
'Shipping options searched for %d packages.',
packageCount,
'woo-gutenberg-products-block'
),
packageCount
) +
' ' +
sprintf(
/* translators: %d number of shipping options available. */
_n(
'%d shipping option was found',
'%d shipping options were found',
shippingOptions,
'woo-gutenberg-products-block'
),
shippingOptions
)
);
}
}, [ shippingRatesLoading, shippingRates ] );
// Prepare props to pass to the ExperimentalOrderShippingPackages slot fill.
// We need to pluck out receiveCart.
// eslint-disable-next-line no-unused-vars
const { extensions, receiveCart, ...cart } = useStoreCart();
const slotFillProps = {
className,
collapsible,
noResultsMessage,
renderOption,
extensions,
cart,
components: {
ShippingRatesControlPackage,
},
};
return (
<LoadingMask
isLoading={ shippingRatesLoading }
screenReaderLabel={ __(
'Loading shipping rates…',
'woo-gutenberg-products-block'
) }
showSpinner={ true }
>
<ExperimentalOrderShippingPackages.Slot { ...slotFillProps } />
<ExperimentalOrderShippingPackages>
<Packages
packages={ shippingRates }
noResultsMessage={ noResultsMessage }
renderOption={ renderOption }
/>
</ExperimentalOrderShippingPackages>
</LoadingMask>
);
};
/**
* Renders multiple packages within the slotfill.
*
* @param {Object} props Incoming props.
* @param {Array} props.packages Array of packages.
* @param {React.ReactElement} props.noResultsMessage Rendered when there are no rates in a package.
* @param {boolean} props.collapsible If the package should be rendered as a
* collapsible panel.
* @param {boolean} props.collapse If the panel should be collapsed by default,
* only works if collapsible is true.
* @param {boolean} props.showItems If we should items below the package name.
* @param {Function} [props.renderOption] Function to render a shipping rate.
* @return {React.ReactElement|null} Rendered components.
*/
const Packages = ( {
packages,
collapse,
showItems,
collapsible,
noResultsMessage,
renderOption,
} ) => {
// If there are no packages, return nothing.
if ( ! packages.length ) {
return null;
}
return (
<>
{ packages.map( ( { package_id: packageId, ...packageData } ) => (
<ShippingRatesControlPackage
key={ packageId }
packageId={ packageId }
packageData={ packageData }
collapsible={ collapsible }
collapse={ collapse }
showItems={ showItems }
noResultsMessage={ noResultsMessage }
renderOption={ renderOption }
/>
) ) }
</>
);
};
ShippingRatesControl.propTypes = {
noResultsMessage: PropTypes.node.isRequired,
renderOption: PropTypes.func,
className: PropTypes.string,
collapsible: PropTypes.bool,
shippingRates: PropTypes.array,
shippingRatesLoading: PropTypes.bool,
};
export default ShippingRatesControl;