woocommerce/packages/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx
2021-12-10 12:03:04 +00:00

201 lines
5.5 KiB
TypeScript

/**
* External dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import { useEffect } from '@wordpress/element';
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, useEditorContext } from '@woocommerce/base-context';
import { CartResponseShippingRate } from '@woocommerce/type-defs/cart-response';
import { ReactElement } from 'react';
/**
* Internal dependencies
*/
import ShippingRatesControlPackage, {
PackageRateRenderOption,
} from '../shipping-rates-control-package';
interface PackagesProps {
packages: CartResponseShippingRate[];
collapse?: boolean;
collapsible?: boolean;
showItems?: boolean;
noResultsMessage: ReactElement;
renderOption: PackageRateRenderOption;
}
/**
* Renders multiple packages within the slotfill.
*
* @param {Object} props Incoming props.
* @param {Array} props.packages Array of packages.
* @param {boolean} props.collapsible If the package should be rendered as a
* @param {ReactElement} props.noResultsMessage Rendered when there are no rates in a package.
* 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 {PackageRateRenderOption} [props.renderOption] Function to render a shipping rate.
* @return {JSX.Element|null} Rendered components.
*/
const Packages = ( {
packages,
collapse,
showItems,
collapsible,
noResultsMessage,
renderOption,
}: PackagesProps ): JSX.Element | null => {
// 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 }
/>
) ) }
</>
);
};
interface ShippingRatesControlProps {
collapsible?: boolean;
shippingRates: CartResponseShippingRate[];
className?: string;
shippingRatesLoading: boolean;
noResultsMessage: ReactElement;
renderOption: PackageRateRenderOption;
}
/**
* 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 {ReactElement} props.noResultsMessage Rendered when there are no packages.
* @param {Function} [props.renderOption] Function to render a shipping rate.
*/
const ShippingRatesControl = ( {
shippingRates,
shippingRatesLoading,
className,
collapsible = false,
noResultsMessage,
renderOption,
}: ShippingRatesControlProps ): JSX.Element => {
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,
},
};
const { isEditor } = useEditorContext();
return (
<LoadingMask
isLoading={ shippingRatesLoading }
screenReaderLabel={ __(
'Loading shipping rates…',
'woo-gutenberg-products-block'
) }
showSpinner={ true }
>
{ isEditor ? (
<Packages
packages={ shippingRates }
noResultsMessage={ noResultsMessage }
renderOption={ renderOption }
/>
) : (
<>
<ExperimentalOrderShippingPackages.Slot
{ ...slotFillProps }
/>
<ExperimentalOrderShippingPackages>
<Packages
packages={ shippingRates }
noResultsMessage={ noResultsMessage }
renderOption={ renderOption }
/>
</ExperimentalOrderShippingPackages>
</>
) }
</LoadingMask>
);
};
export default ShippingRatesControl;