@commercelayer/react-components
Version:
The Official Commerce Layer React Components
53 lines (52 loc) • 2.04 kB
TypeScript
import type { TimeFormat, ChildrenFunction } from '../../typings/index';
import type { DeliveryLeadTime } from '../../reducers/AvailabilityReducer';
import type { JSX } from "react";
interface AvailabilityTemplateChildrenProps extends Omit<Props, 'children'>, DeliveryLeadTime {
text: string;
quantity: number;
}
type FormatRules = {
/**
* Set time format for shipping method. When not set, ``delivery_lead_times`` will not be displayed.
* When set, `delivery_lead_times` for the first shipping method found in the inventory model, will be displayed in the format specified.
*/
timeFormat?: TimeFormat;
/**
* Show shipping method name. Requires `timeFormat` to be set.
*/
showShippingMethodName?: false;
/**
* Show shipping method price. Requires `timeFormat` to be set.
*/
showShippingMethodPrice?: false;
} | {
timeFormat: TimeFormat;
showShippingMethodName: true;
showShippingMethodPrice?: boolean;
} | {
timeFormat: TimeFormat;
showShippingMethodName?: boolean;
showShippingMethodPrice: true;
};
type Props = {
children?: ChildrenFunction<AvailabilityTemplateChildrenProps>;
labels?: {
available?: string;
outOfStock?: string;
negativeStock?: string;
};
} & Omit<JSX.IntrinsicElements['span'], 'children' | 'ref'> & FormatRules;
/**
* The AvailabilityTemplate component displays the availability of the SKU specified
* in the parent `<AvailabilityContainer>` component.
*
* It is possible to customize the text displayed in case of `available`, `outOfStock` or `negativeStock.
* It is also possible to show delivery lead time and either shipping method name and/or price.
* This information will be retrieve from the first shipping method found in the inventory model.
*
* <span type="Requirement" type="info">
* It must to be used inside the `<AvailabilityContainer>` component.
* </span>
*/
export declare function AvailabilityTemplate(props: Props): JSX.Element;
export default AvailabilityTemplate;