/** * External dependencies */ import classNames from 'classnames'; import { _n, sprintf } from '@wordpress/i18n'; import { decodeEntities } from '@wordpress/html-entities'; import type { ReactElement } from 'react'; import type { PackageRateOption } from '@woocommerce/type-defs/shipping'; import { Panel } from '@woocommerce/blocks-checkout'; import Label from '@woocommerce/base-components/label'; import { useSelectShippingRate } from '@woocommerce/base-context/hooks'; import type { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart'; import { sanitizeHTML } from '@woocommerce/utils'; /** * Internal dependencies */ import PackageRates from './package-rates'; import './style.scss'; interface PackageItem { name: string; key: string; quantity: number; } interface Destination { address_1: string; address_2: string; city: string; state: string; postcode: string; country: string; } export interface PackageData { destination: Destination; name: string; shipping_rates: CartShippingPackageShippingRate[]; items: PackageItem[]; } export type PackageRateRenderOption = ( option: CartShippingPackageShippingRate ) => PackageRateOption; interface PackageProps { /* PackageId can be a string, WooCommerce Subscriptions uses strings for example, but WooCommerce core uses numbers */ packageId: string | number; renderOption: PackageRateRenderOption; collapse?: boolean; packageData: PackageData; className?: string; collapsible?: boolean; noResultsMessage: ReactElement; showItems?: boolean; } export const ShippingRatesControlPackage = ( { packageId, className = '', noResultsMessage, renderOption, packageData, collapsible = false, collapse = false, showItems = false, }: PackageProps ): ReactElement => { const { selectShippingRate } = useSelectShippingRate(); const header = ( <> { ( showItems || collapsible ) && (
) } { showItems && ( ) } ); const body = ( selectShippingRate( newShippingRateId, packageId ) } selectedRate={ packageData.shipping_rates.find( ( rate ) => rate.selected ) } renderOption={ renderOption } /> ); if ( collapsible ) { return ( { body } ); } return (
{ header } { body }
); }; export default ShippingRatesControlPackage;